added dragstart and dragend events

Author: bohnacker

README.md

@@ -198,6 +198,8 @@ For each of them you can give a style string like `"width:80px; padding-right:10
 |------------|---------------------|-------------------------------------------------------------------------------------|
 | input      | (ev) => {ev.detail} | Fires when value changes. ev.detail gives the actual value                          |
 | change     | (ev) => {ev.detail} | Fires when value changes, won't fire while typing. ev.detail gives the actual value |
+| dragstart  | (ev) => {}          | Fires when dragging starts                                                          |
+| dragend    | (ev) => {}          | Fires when dragging ends                                                            |
 | editstart  | (ev) => {}          | Fires when edit mode is started                                                     |
 | editend    | (ev) => {}          | Fires when edit mode is ended                                                       |
 | keydown    | (ev) => {}          | Original keydown event                                                              |

dist/index.js

@@ -630,7 +630,7 @@
     		wasActiveOnClick = document.activeElement === dragElement;
     		$$invalidate(4, dragging = true);
     		dragElement.focus();
-    		hasMoved = 0;
+    		hasMoved = false;
     		clickX = isTouchDevice ? ev.touches[0].clientX : ev.clientX;
     		clickY = isTouchDevice ? ev.touches[0].clientY : ev.clientY;
     		$$invalidate(4, dragging = true);
@@ -653,11 +653,17 @@
     		let distX = horizontal ? actX - clickX : 0;
     		let distY = vertical ? -(actY - clickY) : 0;
     		let stepNum = Math.abs(distX) > Math.abs(distY) ? distX : distY;
+
+    		// fire dragstart before value changes
+    		if (stepNum != 0 && !hasMoved) {
+    			hasMoved = true;
+    			dispatch("dragstart");
+    		}
+
     		stepValue(stepNum * stepFactor);
     		clickX = actX;
     		clickY = actY;
-    		hasMoved++;
-    	}
+    	} // hasMoved++;
 
     	function touchendHandler(ev) {
     		dispatch("consoleLog", ev.type);
@@ -666,10 +672,15 @@
 
     	function mouseupHandler(ev) {
     		dispatch("consoleLog", ev.type);
+
+    		if (dragging && hasMoved) {
+    			dispatch("dragend");
+    		}
+
     		$$invalidate(4, dragging = false);
 
-    		// start editing only if element was already focussed on mousedown and not much dragging was done
-    		if (wasActiveOnClick && hasMoved < 2) {
+    		// start editing only if element was already focussed on mousedown and no dragging was done
+    		if (wasActiveOnClick && !hasMoved) {
     			startEditing();
     		}
     	}

dist/index.mjs

@@ -624,7 +624,7 @@ function instance($$self, $$props, $$invalidate) {
 		wasActiveOnClick = document.activeElement === dragElement;
 		$$invalidate(4, dragging = true);
 		dragElement.focus();
-		hasMoved = 0;
+		hasMoved = false;
 		clickX = isTouchDevice ? ev.touches[0].clientX : ev.clientX;
 		clickY = isTouchDevice ? ev.touches[0].clientY : ev.clientY;
 		$$invalidate(4, dragging = true);
@@ -647,11 +647,17 @@ function instance($$self, $$props, $$invalidate) {
 		let distX = horizontal ? actX - clickX : 0;
 		let distY = vertical ? -(actY - clickY) : 0;
 		let stepNum = Math.abs(distX) > Math.abs(distY) ? distX : distY;
+
+		// fire dragstart before value changes
+		if (stepNum != 0 && !hasMoved) {
+			hasMoved = true;
+			dispatch("dragstart");
+		}
+
 		stepValue(stepNum * stepFactor);
 		clickX = actX;
 		clickY = actY;
-		hasMoved++;
-	}
+	} // hasMoved++;
 
 	function touchendHandler(ev) {
 		dispatch("consoleLog", ev.type);
@@ -660,10 +666,15 @@ function instance($$self, $$props, $$invalidate) {
 
 	function mouseupHandler(ev) {
 		dispatch("consoleLog", ev.type);
+
+		if (dragging && hasMoved) {
+			dispatch("dragend");
+		}
+
 		$$invalidate(4, dragging = false);
 
-		// start editing only if element was already focussed on mousedown and not much dragging was done
-		if (wasActiveOnClick && hasMoved < 2) {
+		// start editing only if element was already focussed on mousedown and no dragging was done
+		if (wasActiveOnClick && !hasMoved) {
 			startEditing();
 		}
 	}