There are a few options when you want to support drag and drop in your web application the most popular being jQuery UI Draggable and Droppable. I didn’t like the dependency on jQuery and wanted something that would also support dragging on touch screens.
My first attempt was to use the browser’s native HTML5 Drag and Drop which you can find in my Dart HTML5 Drag and Drop library. But I’ve given up on HTML5 Drag and Drop (and you should too)! You can read the details about why I decided against HTML5 Drag and Drop.
Now, let’s take a look at the new approach that is much more convenient to work with. For details about how to use the library see package on Pub or source on GitHub. Following are some examples of what you can do with the Drag and Drop library.
Examples
Basic
This is a basic example using some draggable documents and a trash as a dropzone.
Live demo
Custom Drag Avatar
An example with a custom image as drag avatar. The image is changed depending on the remaining distance to the trash.
Live demo
Drag Detection Only
An example that uses only drag detection. Use this if you want to implement your own custom dragging behavior.
Even without a drag avatar and Dropzone this helps quite a lot as it unifies touch and mouse dragging and provides convenient event streams.
Live demo
Free Dragging
This example shows how to freely drag and position an element. Instead of using a clone for the drag avatar, the original element itself is dragged.
Live demo
Handle
You can use any subelement of a draggable as a drag handle. If a handle is specified, dragging can only be started on the handle.
Live demo
Cancel
Dragging can be prevented on specified elements. By default dragging is cancelled when the drag starts on form elements (input, textarea, button, select, and option).
Live demo
Constrain to Horizontal or Vertical Axis
Dragging can be constrained to horizontal or vertical only.
A nice side effect: When a drag is constrained to either horizontal or vertical only, the other direction can be used for scrolling on touch devices.
Live demo
Custom Acceptor
You can use predefined or custom Acceptors to determine which Draggables are accepted by which Dropzones.
Live demo
Nested Dropzones
An example of how to drag over nested Dropzones.
Note: If dropped on an inner [Dropzone] the outer [Dropzone] will also receive the drop event.
Live demo
Sortable
An example example to create basic sortable/rearranging behavior.