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).
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.
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.
> 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.
The components are usable and the abstractions seems good. Since I discovered 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.
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.
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.
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.
It's because of hardware acceleration something or other. I don't really know what to do about that :D. I saw the same thing on Chrome and Firefox on Windows until a few months ago. I don't have a Mac so... ¯\_(ツ)_/¯.
The first example on 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.
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.
