* `dragstart event behaviour is a bit changed. It will fire BEFORE actual position of a node is changed. fix #476

CHANGELOG.md

@@ -12,6 +12,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 * Performance fixes for caching
 
+### Changed
+
+* ``dragstart` event behaviour is a bit changed. It will fire BEFORE actual position of a node is changed.
+
 ## [2.4.2][2018-10-12]
 
 ### Fixed

konva.js

@@ -13180,7 +13180,6 @@
         }
 
         node.getStage()._setPointerPosition(evt);
-        node._setDragPosition(evt);
         if (!dd.isDragging) {
           dd.isDragging = true;
           node.fire(
@@ -13192,7 +13191,12 @@
             },
             true
           );
+          // a user can stop dragging inside `dragstart`
+          if (!node.isDragging()) {
+            return;
+          }
         }
+        node._setDragPosition(evt);
 
         // execute ondragmove if defined
         node.fire(

src/DragAndDrop.js

@@ -39,7 +39,6 @@
         }
 
         node.getStage()._setPointerPosition(evt);
-        node._setDragPosition(evt);
         if (!dd.isDragging) {
           dd.isDragging = true;
           node.fire(
@@ -51,7 +50,12 @@
             },
             true
           );
+          // a user can stop dragging inside `dragstart`
+          if (!node.isDragging()) {
+            return;
+          }
         }
+        node._setDragPosition(evt);
 
         // execute ondragmove if defined
         node.fire(

test/unit/DragAndDrop-test.js

@@ -431,4 +431,87 @@ suite('DragAndDrop', function() {
       y: 112
     });
   });
+
+  test('drag start should trigger before movement', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var circle = new Konva.Circle({
+      x: 70,
+      y: 70,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle',
+      draggable: true
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    circle.on('dragstart', function() {
+      assert.equal(circle.x(), 70);
+      assert.equal(circle.y(), 70);
+    });
+
+    stage.simulateMouseDown({
+      x: 70,
+      y: 70
+    });
+
+    stage.simulateMouseMove({
+      x: 100,
+      y: 100
+    });
+
+    stage.simulateMouseUp({
+      x: 100,
+      y: 100
+    });
+  });
+
+  test('can stop drag on dragstart without changing position later', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var circle = new Konva.Circle({
+      x: 70,
+      y: 70,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle',
+      draggable: true
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    circle.on('dragstart', function() {
+      circle.stopDrag();
+    });
+    circle.on('dragmove', function() {
+      assert.equal(false, true, 'dragmove called!');
+    });
+
+    stage.simulateMouseDown({
+      x: 70,
+      y: 70
+    });
+
+    stage.simulateMouseMove({
+      x: 100,
+      y: 100
+    });
+
+    stage.simulateMouseUp({
+      x: 100,
+      y: 100
+    });
+
+    assert.equal(circle.x(), 70);
+    assert.equal(circle.y(), 70);
+  });
 });