Skip to content

sirctseb/drag-handler

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

85 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

drag_handler

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.

Usage

To use this library in your code :

  • add a dependency in your pubspec.yaml :

dependencies: drag_handler: ">=0.1.1 <1.0.0"


* add import in your `dart` code :

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

var dh = new DragHandler();


* add a target

    ```dart
dh.addTarget(querySelector('#drag-element'));
  • 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

    ```dart
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;

About

Encapsulate mouse dragging operations on DOM elements

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages