Native HTML5 Drag and Drop is not easy to work with! The Dart HTML5 Drag and Drop library was created to use HTML5 Drag and Drop in a consistend way across all modern browsers. Here are some examples of how to use it.
API and Examples are inspired by
- HTML5 Sortable (thank you, Ali Farhadi!)
- jQuery UI: Draggable, Droppable and Sortable
For installation instructions, download and source code see
- Dart HTML5 Drag and Drop on GitHub.
You are welcome to contribute by reporting an Issue or forking the repository.
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. To get the same behaviour for all browsers, drag and drop events are emulated in IE9. 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
HTML5 drag and drop supports setting of custom drag images in place of the auto-generated drag overlay.
IE9 and IE10 do not support this. To get the same behaviour, a custom drag image is emulated: An image is manually created and moved together with the mouse (similar to what jQuery IU does).
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.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
Sortable Grid
Reorder elements inside a grid.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
Exclude Items
Exclude elements from beeing sortable.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
Sortable List With Handles
Items can only be dragged with the handle.
- :: Item 1
- :: Item 2
- :: Item 3
- :: Item 4
- :: Item 5
- :: Item 6
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.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6