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 decent workaround, we can also tell IE9 to drag anything. Try the following example in IE9.

Note: The `draggable="true"` attribute is automatically added by the `Draggable` class, 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). IE always creates a drag image from the element that the user picks up.

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

Note: The polyfill for drag images is automatically used if the browser does not support it. But you can use the polyfill for any browser by setting `alwaysUseDragImagePolyfill = true` on the `Draggable`.

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

Grid behaviour is applied when elements are floated.

Exclude Items

Exclude elements from beeing sortable.

Sortable List With Handles

Items can only be dragged with the handle.

Connected Sortable Lists

Two connected lists.