Draggable constructor

Draggable(dynamic elementOrElementList, { AvatarHandler? avatarHandler, bool horizontalOnly = false, bool verticalOnly = false, String? handle, String cancel = 'input, textarea, button, select, option', String draggingClass = 'dnd-dragging', String draggingClassBody = 'dnd-drag-occurring', int minDragStartDistance = 4, })

Creates a new Draggable for elementOrElementList. The elementOrElementList must be of type Element, ElementList, or List<Element>.

Options

The 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 for the avatarHandler :

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

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

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

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

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

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

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

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

Implementation

Draggable(elementOrElementList,
    {this.avatarHandler,
    this.horizontalOnly = false,
    this.verticalOnly = false,
    this.handle,
    this.cancel = 'input, textarea, button, select, option',
    this.draggingClass = 'dnd-dragging',
    this.draggingClassBody = 'dnd-drag-occurring',
    this.minDragStartDistance = 4}) {
  // Wrap in a List if it is not a list but a single Element.
  _elements = elementOrElementList is List<Element>
      ? elementOrElementList
      : [elementOrElementList];

  // Detect Pointer Event Support.
  JsObject jsWindow = JsObject.fromBrowserObject(window);

  if (jsWindow.hasProperty('PointerEvent')) {
    // Browser with support for Pointer Events.
    _eventManagers.add(_PointerManager(this));
  } else {
    // We're on a browser with no support for Pointer Events.
    // Install touch and mouse listeners.
    if (TouchEvent.supported) {
      _eventManagers.add(_TouchManager(this));
    }
    _eventManagers.add(_MouseManager(this));
  }
}