

Interact.js – drag and drop, resizing and multi-touch gestures - spountzy
https://github.com/taye/interact.js

======
sphericalgames
The second example needs some more work.

When you drag no-drop over the yes-drop div it appears on top. If you then
drag yes-drop and go back to dragging the no-drop this then appears under the
yes-drop div.

Also I don't get what causes the highlight of the drop zones to activate.
Percentage of shape? Center of Shape? Personally I prefer that it is the mouse
pointer that activates the enter / leave and not the shape itself.

Added: If you drag the yes-drop from the side to enter the drop zones, the
outer zone looks like 50 pixels wide and yet the error or margin to drop it in
there is about 2 pixels before you enter the inner zone.

~~~
taye
> When you drag no-drop over the yes-drop div it appears on top. If you then
> drag yes-drop and go back to dragging the no-drop this then appears under
> the yes-drop div.

This is because before dragging, there's no CSS transform style. After
dragging the transformation causes the element to be rendered above its
siblings. Then when the other element is transformed it is then rendered
above. I've added

    
    
      transform: translate(0px, 0px);
    

to both elements to fix that.

> Also I don't get what causes the highlight of the drop zones to activate.
> Percentage of shape? Center of Shape? Personally I prefer that it is the
> mouse pointer that activates the enter / leave and not the shape itself.

It's mentioned in the JS code comments

    
    
      interact('.dropzone').dropzone({
          // only accept elements matching this CSS selector
          accept: '#yes-drop',
          // Require a 75% element overlap for a drop to be possible
          overlap: 0.75,
    

You could instead set overlap to "pointer".

> Added: If you drag the yes-drop from the side to enter the drop zones, the
> outer zone looks like 50 pixels wide and yet the error or margin to drop it
> in there is about 2 pixels before you enter the inner zone.

The deepest dropzone element in the DOM gets drop priority if the
element/pointer is over multiple dropzones.

------
obsurveyor
It's neat but on Android Chrome the areas that accept taps/drags/pinches/etc.
consume swipe/drag to scroll events which means you have to create lanes or
something on long pages(like the interactjs.io page itself).

~~~
ams6110
Yep, saw the same thing. Everything works nicely but on a small screen you can
get into situations where you can't scroll the page unless you drag the very
edge.

------
thomasfl
The components are usable and the abstractions seems good. Since I discovered
famo.us ([http://famo.us](http://famo.us)) earlier this year I have preferred
to do use it for javascript UX code to ensure scrolling and animations run
smoothly. I would love to have interact.js rewritten as an extensions to
famo.us. Famo.us runs smooth, but lacks good examples, tools and extensions.

~~~
taye
I've never liked famo.us and never bothered to look into it so a rewrite for
it won't happen (at least not by me). I'd like to think that if famo.us is any
good then something like interact.js should be able to work with it without
heavy modification or with a thin layer on top, but maybe I'm thinking too
highly of my own work :-P.

------
taternuts
Looks really nice and worked really well in my S5. The one issue I had was
with the multi-touch rotation example, you're not able to touch and scroll up
with your fingers if you touch in the background. The resizing example isn't
as bad but doesn't seem to register the first time you touch+drag either.

~~~
taye
Thanks! Unfortunately I've had only an Android tablet and Firefox OS phone to
test the homepage extensively so I'm not surprised that the website has some
usability problems on other devices and form factors.

------
TheRealWatson
On Chrome on Mac the dragging to the left leaves a trail behind, which goes
away when finished.

~~~
tambourine_man
Same on Safari, besides the fonts “flash” when animations start/stop.

[http://i.imgur.com/9DCsEZg.jpg](http://i.imgur.com/9DCsEZg.jpg)

Hardware acceleration on browsers is still complicated.

------
elwell
The first example on [http://interactjs.io/](http://interactjs.io/) is buggy
in Windows/Chrome. When I drag, it leaves a trail of the right edge of the
object; reminiscent of a crashing Windows 98.

~~~
taye
That's due to hardware acceleration so really Chrome is buggy. I don't really
know what to do about that.

------
bpowah
Great stuff. Works great on a desktop except for the two-finger gestures. I'd
love to see a zoom and rotate binding to the mouse scroll-wheel.

------
joshcrowder
Really interesting - We've just implemented a html5 drag and drop which
supports IE all the way back to IE9 but not mobile! This looks great

------
yuribit
Well done!! The only thing that is missing and that I really need is the grid
layout support, but animations are really light and smooth!

~~~
taye
I think that that sort of thing would better done in a separate library. I've
actually been thinking about doing it myself but I haven't had the time.

------
nkozyra
This is pretty fantastic, and at a bare minimum looks like a nice replacement
for jQueryUI's drag-and-drop.

------
splatcollision
Very nice library & code - thanks for making it not require jquery or any
other library!

------
bsimpson
The double tap example never resizes on my Chromebook Pixel. The others work
nicely.

------
deanclatworthy
Just tried the demos on my phone (iPhone6) on the way home. Works wonderfully.

------
DiThi
Typo: "Resize from the bottom and left edges", it means right edge.

~~~
taye
Thanks for mentioning that. It's fixed now.

------
chucknelson
At first glance, this seems...really solid. Thanks!

~~~
taye
My heart sunk a little, before the ellipsis. You're welcome!

------
softdev12
Great job. It seems like a subset of jquery functionality? Is there something
that interact.js does that jquery doesn't? Or is it just a size thing...

~~~
taye
Thank you.

I wouldn't call it a subset and I didn't make it as an alternative to jQuery
UI. However, I do have plans to make one ;-). I think that the advantage is in
what interact.js _doesn 't_ do. It's more about providing the data that
applications need for responding to pointer input however they like - Drag and
drop is just one way to use the input data.

I wrote about the ideas behind it on the Mozilla Hacks blog recently:
[https://hacks.mozilla.org/2014/11/interact-js-for-drag-
and-d...](https://hacks.mozilla.org/2014/11/interact-js-for-drag-and-drop-
resizing-and-multi-touch-gestures/)

~~~
softdev12
Got it. Really nicely done.

------
varg
Impressive! Great work.

------
tikumo
pinching and multitouch wont work on my Lenovo Flex 15 notebook..

~~~
taye
Gah! Thanks for mentioning this. What browser did you try it with?

------
dang
Please don't put "Show HN" in the title unless you're personally involved with
the project.

Anything that anybody posts is technically being shown to HN, so if we didn't
have this rule, Show HN would cover everything.

------
npeihl
Seeing how this isn't a Show HN post, wouldn't it be more prudent to log
issues on the Github page rather than in HN comments?

~~~
dang
The author appears active in the thread, so we needn't worry.

------
bizocean
Trying let see how it works for me

