Dart Drag and Drop

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.

Open in separate tab

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.

Open in separate tab

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.

Open in separate tab

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.

Open in separate tab

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.

Open in separate tab

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

Open in separate tab

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.

Open in separate tab

Live demo


Custom Acceptor

You can use predefined or custom Acceptors to determine which Draggables are accepted by which Dropzones.

Open in separate tab

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.

Open in separate tab

Live demo


Sortable

An example example to create basic sortable/rearranging behavior.

Open in separate tab

Live demo


Shadow DOM

Example how to use drag and drop in Shadow DOM with Polymer Web Components.

Open in separate tab

Live demo


Comments