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.
Features
- Make any HTML Element
draggable. - Create
dropzonesand connect them withdraggables. - Rearrange elements with
sortables(similar to jQuery UI Sortable). - Support for
touch eventson touch screen devices. - Same functionality and API for IE9+, Firefox, Chrome and Safari.
- Uses fast native HTML5 Drag and Drop of the browser whenever possible.
- For browsers that do not support some features, the behaviour is emulated. This is the case for IE9 and partly for IE10 (when custom drag images are used).
API and Examples are inspired by HTML5 Sortable, jQuery UI (Draggable, Droppable, Sortable) and Touch Punch.
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
Only Allow Drag on Handles
Items can only be dragged with the handle.
- :: Item 1
- :: Item 2
- :: Item 3
- :: Item 4
- :: Item 5
- :: Item 6
Prevent Drag on Some Elements
Starting a drag can be prevented on specified elements. In this example, drag can only be started on the outer div.
By default, elements of type input, textarea, button, select, or option are not draggable.
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