drag_handler is a dart library to simplify the management of mouse dragging state. An instance of the DragHandler class maintains a set of DOM elements and monitors them for mouse events.


To use this library in your code :

  • add a dependency in your pubspec.yaml :

    drag_handler: ">=0.1.1 <1.0.0"

* add import in your `dart` code :

import 'package:drag_handler/drag_handler.dart';
  • create a DragHandler

    var dh = new DragHandler();

* add a target

  • listen for drag events

    1. Drag start: when the user mouses down on a DOM element added to the DragHandler and begins to move the mouse.
      dh.onDragStart.listen((DragEvent e) => print('Started dragging on element ${e.element}'));
    1. Drag: each time the user moves the mouse during a drag
      dh.onDrag.listen((DragEvent e) => print('Still dragging ${e.element}'));
    1. Drag out: when the user moves the mouse out of an element in the DragHandler.
      dh.onDragOut.listen((DragEvent e) => print('Started drag on ${e.element}, dragging out of ${e.other}'));
    1. Drag over: when the user moves the mouse into an element in the DragHandler
      dh.onDragOver.listen((DragEvent e) => print('Started drag on ${e.element}, dragging over ${e.other}'));
    1. Drag end: when the user mouses up during a drag
      dh.onDragEnd.listen((DragEvent e) => print('Finished dragging ${e.element}'));
  • selectively add targets

    If you want to know if a drag operation enters or leaves an element, but you don't want to watch for drags that start on that element, you can specify those events when adding the target:

    dh.addTarget(querySelector("#drag-target"), drag: false, over: true, out: true);

* temporarily disable a DragHandler

dh.enabled = false;
  • define conditions in which drags may begin

    // don't react to mouse drags when application is loading
    dh.dragConditions = (DragHandler dh, Element e, MouseEvent me) => application_state == ApplicationState.LOADING;