diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js
index 52f91f85..22731767 100644
--- a/src/DragAndDrop.js
+++ b/src/DragAndDrop.js
@@ -8,7 +8,6 @@
y: 0
},
node: null,
- distance: 1,
// methods
_drag: function(evt) {
@@ -18,7 +17,7 @@
if(node) {
if(!dd.isDragging) {
var pos = node.getStage().getPointerPosition();
- var dragDistance = node.getAttr('dragDistance') || dd.distance;
+ var dragDistance = node.dragDistance();
var distance = Math.max(
Math.abs(pos.x - dd.startPointerPos.x),
Math.abs(pos.y - dd.startPointerPos.y)
diff --git a/src/Global.js b/src/Global.js
index ab0aacf1..2c1a2645 100644
--- a/src/Global.js
+++ b/src/Global.js
@@ -50,6 +50,7 @@ var Kinetic = {};
traceArrMax: 100,
dblClickWindow: 400,
pixelRatio: undefined,
+ dragDistance : 0,
enableThrottling: true,
// user agent
diff --git a/src/Node.js b/src/Node.js
index 9783ad78..29d8368f 100644
--- a/src/Node.js
+++ b/src/Node.js
@@ -1351,6 +1351,16 @@
getType: function() {
return this.nodeType;
},
+ getDragDistance: function() {
+ // compare with undefined because we need to track 0 value
+ if (this.attrs.dragDistance !== undefined) {
+ return this.attrs.dragDistance;
+ } else if (this.parent) {
+ return this.parent.getDragDistance();
+ } else {
+ return Kinetic.dragDistance;
+ }
+ },
_get: function(selector) {
return this.nodeType === selector ? [this] : [];
},
@@ -1827,6 +1837,26 @@
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offsetY', 0);
+ /**
+ * get/set drag distance
+ * @name dragDistance
+ * @memberof Kinetic.Node.prototype
+ * @param {Number} distance
+ * @returns {Number}
+ * @example
+ * // get drag distance
+ * var dragDistance = node.dragDistance();
+ *
+ * // set distance
+ * // node starts dragging only if pointer moved more then 3 pixels
+ * node.dragDistance(3);
+ * // or set globally
+ * Kinetic.dragDistance = 3;
+ */
+
+ Kinetic.Factory.addSetter(Kinetic.Node, 'dragDistance');
+ Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'dragDistance');
+
/**
* get/set offset y
* @name offsetY
diff --git a/test/functional/DragAndDropEvents-test.js b/test/functional/DragAndDropEvents-test.js
index f2df61f3..3096c8ab 100644
--- a/test/functional/DragAndDropEvents-test.js
+++ b/test/functional/DragAndDropEvents-test.js
@@ -279,6 +279,57 @@ suite('DragAndDropEvents', function() {
});
+ // ======================================================
+ test('drag and drop distance', function(done) {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+
+ var circle = new Kinetic.Circle({
+ x: 40,
+ y: 40,
+ radius: 20,
+ strokeWidth: 4,
+ fill: 'green',
+ stroke: 'black',
+ draggable: true
+ });
+
+
+ layer.add(circle);
+ stage.add(layer);
+ circle.dragDistance(4);
+ var top = stage.content.getBoundingClientRect().top;
+
+ stage._mousedown({
+ clientX: 40,
+ clientY: 40 + top
+ });
+
+ setTimeout(function() {
+ stage._mousemove({
+ clientX: 40,
+ clientY: 42 + top
+ });
+ assert(!circle.isDragging(), 'still not dragging');
+ stage._mousemove({
+ clientX: 40,
+ clientY: 45 + top
+ });
+ assert(circle.isDragging(), 'now circle is dragging');
+ Kinetic.DD._endDragBefore();
+ stage._mouseup({
+ clientX: 41,
+ clientY: 45 + top
+ });
+ Kinetic.DD._endDragAfter({dragEndNode:circle});
+
+
+
+ done();
+ }, 20);
+
+ });
+
// ======================================================
test('cancel drag and drop by setting draggable to false', function(done) {
var stage = addStage();
diff --git a/test/unit/Node-test.js b/test/unit/Node-test.js
index a4e6c5a5..6e553bd0 100644
--- a/test/unit/Node-test.js
+++ b/test/unit/Node-test.js
@@ -1523,6 +1523,38 @@ suite('Node', function() {
assert.equal(Math.round(marker.getAbsolutePosition().y), Math.round(diagonal / 2), 'marker absolute position y should be about ' + Math.round(diagonal / 2) + ' but is about ' + Math.round(marker.getAbsolutePosition().y));
});
+ // ======================================================
+ test('test dragDistance', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var rect1 = new Kinetic.Rect({
+ x: 1,
+ y: 2,
+ width: 100,
+ height: 50,
+ fill: 'red'
+ });
+
+ var group = new Kinetic.Group({
+ dragDistance : 2
+ });
+
+ var rect2 = new Kinetic.Rect({
+ x: 3,
+ width: 100,
+ height: 50,
+ fill: 'red'
+ });
+ group.add(rect2);
+
+ layer.add(rect1).add(group);
+ stage.add(layer);
+
+ assert.equal(rect1.dragDistance(), 0);
+ assert.equal(group.dragDistance(), 2);
+ assert.equal(rect2.dragDistance(), 2);
+ });
+
// ======================================================
test('translate, rotate, scale shape', function() {
var stage = addStage();