options.propagateEvents, options.selector can be an Element

CHANGELOG.md

@@ -0,0 +1,24 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+
+## [Unreleased]
+
+
+## [0.4.3] - 2018-03-25
+### Added
+- Option `propagate` to let events propagate/bubble after being handled.
+- This CHANGELOG file.
+
+### Changed
+- Option `selector` can be a single specific HTML element, and not just a CSS selector.
+
+
+## 0.4.2 - 2018-02-24
+
+
+[Unreleased]: https://github.com/Sphinxxxx/drag-tracker/compare/v0.4.3...HEAD
+[0.4.3]: https://github.com/Sphinxxxx/drag-tracker/compare/v0.4.2...v0.4.3

README.md

@@ -11,12 +11,13 @@ https://codepen.io/Sphinxxxx/pen/KXedQe
 
     dragTracker({
       container:          /* The element the user can drag within */,
-      selector:           /* CSS selector for elements inside the container that are draggable */,
+      selector:           /* CSS selector for elements inside the container that are draggable, or a single HTML element */,
       
       callback:           /* Your code which decides what happens during a drag operation */,
       callbackDragStart:  /* Optional callback when a drag operation is about to start */,
       callbackDragEnd:    /* Optional callback when a drag operation has ended */,
       callbackClick:      /* Optional callback when a draggable element is only clicked, not dragged */,
+      propagateEvents:    /* Whether to let mouse/touch events propagate (bubble) after being handled. Usually not wanted in case multiple handlers track the same container */,
       
       roundCoords:  true  /* Whether callback coordinates should be integers */,
       dragOutside:  true  /* Whether the draggable elements can be dragged outside the bounds of the container */,

dist/drag-tracker.js

@@ -1,5 +1,5 @@
 /*!
- * drag-tracker v0.4.2
+ * drag-tracker v0.4.3
  * https://github.com/Sphinxxxx/drag-tracker#readme
  *
  * Copyright 2017-2018 Andreas Borgen
@@ -34,6 +34,7 @@ function dragTracker(options) {
         callbackEnd = options.callbackDragEnd,
 
     callbackClick = options.callbackClick,
+        propagate = options.propagateEvents,
         roundCoords = options.roundCoords !== false,
         dragOutside = options.dragOutside !== false,
 
@@ -86,11 +87,22 @@ function dragTracker(options) {
         return roundCoords ? [Math.round(x), Math.round(y)] : [x, y];
     }
 
+    function stopEvent(e) {
+        e.preventDefault();
+        if (!propagate) {
+            e.stopPropagation();
+        }
+    }
+
     function onDown(e) {
-        dragged = selector ? e.target.closest(selector) : {};
+        if (selector) {
+            dragged = selector instanceof Element ? selector.contains(e.target) ? selector : null : e.target.closest(selector);
+        } else {
+            dragged = {};
+        }
+
         if (dragged) {
-            e.preventDefault();
-            e.stopPropagation();
+            stopEvent(e);
 
             mouseOffset = selector && handleOffset ? getMousePos(e, dragged) : [0, 0];
             dragStart = getMousePos(e, container, mouseOffset);
@@ -108,8 +120,7 @@ function dragTracker(options) {
         if (!dragged) {
             return;
         }
-        e.preventDefault();
-        e.stopPropagation();
+        stopEvent(e);
 
         var pos = getMousePos(e, container, mouseOffset, !dragOutside);
         callback(dragged, pos, dragStart);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "drag-tracker",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "A simple library for dragging things around. Tracks dragging with touch or mouse.",
   "main": "dist/drag-tracker.js",
   "module": "src/drag-tracker.js",

src/drag-tracker.js

@@ -30,6 +30,7 @@ function dragTracker(options) {
           //dragTracker may not play well with additional click events on the same container,
           //so we include the opportunity to register clicks as well:
           callbackClick = options.callbackClick,
+          propagate = options.propagateEvents,
 
           roundCoords = (options.roundCoords !== false),
           dragOutside = (options.dragOutside !== false),
@@ -87,12 +88,27 @@ function dragTracker(options) {
         }
         return (roundCoords ? [Math.round(x), Math.round(y)] : [x, y]);
     }
+
+    function stopEvent(e) {
+        e.preventDefault();
+        if(!propagate) {
+            e.stopPropagation();
+        }
+    }
 
     function onDown(e) {
-        dragged = selector ? e.target.closest(selector) : {};
+        if(selector) {
+            dragged = (selector instanceof Element)
+                            ? (selector.contains(e.target) ? selector : null)
+                            : e.target.closest(selector);
+        }
+        else {
+            //No specific targets, just register dragging within the container. Create a dummy object so 'dragged' isn't falsy:
+            dragged = {};
+        }
+
         if(dragged) {
-            e.preventDefault();
-            e.stopPropagation();
+            stopEvent(e);
 
             mouseOffset = (selector && handleOffset) ? getMousePos(e, dragged) : [0, 0];
             dragStart = getMousePos(e, container, mouseOffset);
@@ -106,8 +122,7 @@ function dragTracker(options) {
 
     function onMove(e) {
         if(!dragged) { return; }
-        e.preventDefault();
-        e.stopPropagation();
+        stopEvent(e);
 
         const pos = getMousePos(e, container, mouseOffset, !dragOutside);
         callback(dragged, pos, dragStart);