atomprogs / dart-dnd

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

Dart Drag and Drop

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

Demos

See Dart Drag and Drop 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.
• Much more... see examples.

Usage

Note: You can always take a look at the examples and their source code.

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 = new Draggable(querySelectorAll('.draggable'));

// Install dropzone.
Dropzone dropzone = new 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 = new Draggable(querySelectorAll('.draggable'), 
    avatarHandler: new AvatarHandler.clone());
    

// Draggable with original element as avatar.
Draggable draggable = new Draggable(querySelectorAll('.draggable'), 
    avatarHandler: new 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
  • new AvatarHandler.original() - handler that uses the original draggable as avatar. See OriginalAvatarHandler.
  • new 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.

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 dragged element during a drag. 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.

License

The MIT License (MIT)