Need help with dart-dnd?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

marcojakob
132 Stars 94 Forks MIT License 142 Commits 5 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 101,006
Dart
HTML
s3
Shell
128 commits
# 348,689
Dart
CSS
Shell
reactjs
2 commits
# 682,475
Dart
HTML
Shell
1 commit
# 287,991
Dart
HTML
Shell
mocks
1 commit
# 542,420
Dart
HTML
Shell
1 commit
# 12,621
Dart
present...
automat...
slide-m...
1 commit
# 208,387
HTML
Dart
Shell
thrift
1 commit
# 380,681
Racket
elm
ctags
Elixir
1 commit
# 372,919
Dart
Shell
HTML
oauth2
1 commit

Dart Drag and Drop

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

Star this Repo Pub Package

GitHub | Pub | Demos and Examples

DnD Screenshot

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'));

You'll most likely want some drag avatar to show the user that a drag is going on. There are two predefined

AvatarHandler
s 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());

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

Stream
s 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
    Draggable
    s will be accepted by this
    Dropzone
    . If none is specified, all
    Draggable
    s 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

Stream
s 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.

Attribution

The Dart Drag and Drop library is inspired by

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)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.