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.
This is a basic example using some draggable documents and a trash as a dropzone.
Custom Drag Avatar
An example with a custom image as drag avatar. The image is changed depending on the remaining distance to the trash.
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.
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.
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.
Dragging can be prevented on specified elements. By default dragging is cancelled when the drag starts on form elements (
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.
You can use predefined or custom
Acceptors to determine which
Draggables are accepted by which
An example of how to drag over nested
Note: If dropped on an inner [Dropzone] the outer [Dropzone] will also receive the drop event.
An example example to create basic sortable/rearranging behavior.