Dart HTML5 Drag and Drop

Draggable and Dropzone

Drag the documents over the trash, and drop them.

Dragging Divs

All HTML elements with the draggable="true" attribute can be dragged - well...almost. Internet Explorer 9 does not support this attribute and thus by default only links and images are draggable in IE9. With a workaround, we can also tell IE9 to drag anything. Try the following example in IE9.

Note: The draggable="true" attribute is automatically added to draggables, so there is no need to set it in HTML.

Drop Effects

The drop effect controls the feedback that is given when hovering over the target element. The browser's cursor can take on one of the following forms: 'move', 'copy', 'link', and 'none'. If 'none' is used, dropping on the target is not possible.

Custom Drag Images

That was a tough one to make work cross-browser! IE9 and IE10 do not support setting a custom drag image (as other modern browsers do).

So I had to implement a polyfill that draws a custom image and moves it around with the mouse (like jQuery and others do). The movement is not as smooth as with the native implementation but works quite well. (If you're curious how the polyfill works: 1. make sure the default image does not show, 2. draw the custom image, 3. ensure the mouse events are passed through to the layer underneath the drag image... more info in the source).

Dropping on Nested Elements

In its original form, HTML5 dragEnter and dragLeave events of an element also fire when dragging over a child element. This makes it very hard to distinguish important events from unimportant ones. The dart html5_dnd library ensures that only the relevant events (entering or leaving the main element) are fired.

Sortable List

Reorder Elements. Notice the behaviour when dragging a smaller element over a bigger element.

Sortable Grid

Reorder elements inside a grid.

Exclude Items

Exclude elements from beeing sortable.

Sortable List With Handles

Items can only be dragged with the handle.

Two Sortable Groups

Two sortable groups that are connected with each other.

Elements in the right group display an icon when dragged, elements in the left group display the dragged element. Whenever an element changes group it is uninstalled from the previous group and installed in the new group.