dnd

Description:

dnd

Dart Drag and Drop #
Drag and Drop for Dart web apps with mouse and touch support.


GitHub |
Pub |
Demos and Examples

Features #

Use any HTML Element as Draggable or Dropzone.
Mouse and Touch dragging.
Draggable events: dragStart, drag, and dragEnd
Dropzone events: dragEnter, dragOver, dragLeave, and drop
Drag avatars as visual indication of a drag operation:

Original element as drag avatar.
Clone as drag avatar.
Custom drag avatar.


Support for Shadow DOM (Web Components, Custom Elements, Polymer, etc.).
Much more... see examples.

Usage #
Before you read the instructions below, you should take a look at the
examples.
Basic Set Up #
Create a Draggable and give it some HTML elements; this will make them
draggable. You can either pass a single Element to the constructor or an
ElementList that is returned by querySelectorAll.
If you also want to drop somewhere, you'll need a Dropzone.
// Install draggable (no avatar).
Draggable draggable = Draggable(querySelectorAll('.draggable'));

// Install dropzone.
Dropzone dropzone = Dropzone(querySelector('.dropzone'));
copied to clipboard
You'll most likely want some drag avatar to show the user that a drag is
going on. There are two predefined AvatarHandlers that you can use as follows.
But you could also provide your own implementation of AvatarHandler.
// Draggable with clone as avatar.
Draggable draggable = Draggable(querySelectorAll('.draggable'),
avatarHandler: AvatarHandler.clone());


// Draggable with original element as avatar.
Draggable draggable = Draggable(querySelectorAll('.draggable'),
avatarHandler: AvatarHandler.original());
copied to clipboard
Draggable Options #
The following options can be passed as named parameters to the constructor of
Draggable:


avatarHandler: Is responsible for creating, position, and removing a drag
avatar. A drag avatar provides visual feedback during a drag operation. Here
are possible options (see above for an example):

null (the default) - will not create a drag avatar
AvatarHandler.original() - handler that uses the original
draggable as avatar. See OriginalAvatarHandler.
AvatarHandler.clone() - handler that uses a clone of the draggable
element as avatar. See CloneAvatarHandler.
A custom AvatarHandler - you can provide your own implementation of
AvatarHandler.



horizontalOnly: If set to true, only horizontal dragging is tracked.
This enables vertical touch dragging to be used for scrolling.


verticalOnly: If set to true, only vertical dragging is tracked.
This enables horizontal touch dragging to be used for scrolling.


handle: If handle query String is specified, it restricts the dragging from
starting unless it occurs on the specified element(s). Only elements that
descend from the draggables elements are permitted.


cancel: If cancel query String is specified, drag starting is prevented on
specified elements.


draggingClass: Is the css class set to the dragged element
during a drag. If set to null, no such css class is added.


draggingClassBody: Is the css class set to the html body tag
during a drag. If set to null, no such css class is added.


minDragStartDistance: Is the minimum distance in pixels that is needed
for a drag to start. Default is 4. This allows for clicks with tiny movement.


Draggable Events #
Available event Streams on Draggable:


onDragStart: Fired when the user starts dragging.
Note: onDragStart is fired not on touchStart or mouseDown but as
soon as there is a drag movement. When a drag is started an onDrag event
will also be fired.


onDrag: Fired periodically throughout the drag operation.


onDragEnd: Fired when the user ends the dragging.
Note: Is also fired when the user clicks the 'esc'-key or the window loses focus.


Dropzone Options #
The following options can be passed as named parameters to the constructor of
Dropzone:


acceptor: Is used to determine which Draggables will be accepted by
this Dropzone. If none is specified, all Draggables will be accepted.


overClass: Is the css class set to the dropzone element when an accepted
draggable is dragged over it. If set to null, no such css class is added.


invalidClass: Is the css class set to the dropzone element when a not-accepted
draggable is dragged over it. If set to null, no such css class is added.


Dropzone Events #
Available event Streams on Dropzone:


onDragEnter: Fired when a Draggable enters this Dropzone.


onDragOver: Fired periodically while a Draggable is moved over a Dropzone.


onDragLeave: Fired when a Draggable leaves this Dropzone.


onDrop: Fired when a Draggable is dropped inside this Dropzone.


Note: Dropzone events are only fired when the Draggable is accepted by
the Acceptor.
Shadow DOM #
Web Components create a nice ecapsulation through Shadow DOM. But this creates
a problem with dropzones inside the Shadow DOM as they never receive events
because all events are captured by the host element. To make this work we need
to retarget events to the Shadow DOM children through recursive
elementFromPoint() calls.
For performance reasons it wouldn't make sense to retarget all drag and drop
events. If you wish to retarget events to the Shadow DOM children, you must add
a dnd-retarget attribute to the host:
// Retarget drag and drop events to Shadow DOM children.
<my-element dnd-retarget></my-element>
copied to clipboard
Attribution #
The Dart Drag and Drop library is inspired by

jQuery UI Draggable
Draggabilly

Thank you for your work!
Running / Building / Testing #

Run from the terminal: webdev serve
Build from the terminal: webdev build

License #
The MIT License (MIT)