Drag and Drop for Dart web apps with mouse and touch support.
Drag and Drop for Dart web apps with mouse and touch support.
GitHub | Pub | Demos and Examples
Draggableor
Dropzone.
dragStart,
drag, and
dragEnd
dragEnter,
dragOver,
dragLeave, and
drop
Before you read the instructions below, you should take a look at the examples.
Create a
Draggableand give it some HTML elements; this will make them draggable. You can either pass a single
Elementto the constructor or an
ElementListthat 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'));
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());
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.
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.
Available event
Streams on
Draggable:
onDragStart: Fired when the user starts dragging.
onDragStartis fired not on touchStart or mouseDown but as soon as there is a drag movement. When a drag is started an
onDragevent will also be fired.
onDrag: Fired periodically throughout the drag operation.
onDragEnd: Fired when the user ends the dragging.
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.
Available event
Streams on
Dropzone:
onDragEnter: Fired when a
Draggableenters this
Dropzone.
onDragOver: Fired periodically while a
Draggableis moved over a
Dropzone.
onDragLeave: Fired when a
Draggableleaves this
Dropzone.
onDrop: Fired when a
Draggableis dropped inside this
Dropzone.
Note:
Dropzoneevents are only fired when the
Draggableis accepted by the
Acceptor.
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-retargetattribute to the host:
// Retarget drag and drop events to Shadow DOM children.
The Dart Drag and Drop library is inspired by
Thank you for your work!
webdev serve
webdev build
The MIT License (MIT)