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);

> 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,

> 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.

http://i.imgur.com/9DCsEZg.jpg

Hardware acceleration on browsers is still complicated.

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...