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
:
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
- 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}'));
- Drag: each time the user moves the mouse during a drag
dh.onDrag.listen((DragEvent e) => print('Still dragging ${e.element}'));
- 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}'));
- 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}'));
- 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;