lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

you can now cancel drag and drop with setDraggable(false) during a drag and drop operation

Browse Source
This commit is contained in:
Eric Rowell
2012-06-19 17:06:31 -07:00
parent 5679b1fb76
commit ce5a8f3209
5 changed files with 102 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
dist/kinetic-core.js vendored
View File

@@ -420,12 +420,24 @@ Kinetic.Node = function(config) {
this.setAttrs(config);
// bind events
this.on('draggableChange.kinetic_reserved', function() {
this.on('draggableChange.kinetic', function() {
if(this.attrs.draggable) {
this._listenDrag();
}
else {
// remove event listeners
this._dragCleanup();
/*
* force drag and drop to end
* if this node is currently in
* drag and drop mode
*/
var stage = this.getStage();
var go = Kinetic.GlobalObject;
if(stage && go.drag.node && go.drag.node._id === this._id) {
stage._endDrag();
}
}
});
/*
@@ -1118,7 +1130,7 @@ Kinetic.Node.prototype = {
this._dragCleanup();
var go = Kinetic.GlobalObject;
var that = this;
this.on('mousedown.initdrag touchstart.initdrag', function(evt) {
this.on('mousedown.kinetic_initdrag touchstart.kinetic_initdrag', function(evt) {
that._initDrag();
});
},
@@ -1139,8 +1151,8 @@ Kinetic.Node.prototype = {
* remove drag and drop event listener
*/
_dragCleanup: function() {
this.off('mousedown.initdrag');
this.off('touchstart.initdrag');
this.off('mousedown.kinetic_initdrag');
this.off('touchstart.kinetic_initdrag');
},
/**
* handle node event
@@ -1602,11 +1614,11 @@ Kinetic.Stage = function(config) {
this._bindContentEvents();
//change events
this.on('widthChange.kinetic_reserved', function() {
this.on('widthChange.kinetic', function() {
this._resizeDOM();
});
this.on('heightChange.kinetic_reserved', function() {
this.on('heightChange.kinetic', function() {
this._resizeDOM();
});
var go = Kinetic.GlobalObject;
@@ -2350,6 +2362,7 @@ else if(!isDragging && this.mouseMove) {
_endDrag: function(evt) {
var go = Kinetic.GlobalObject;
if(go.drag.node) {
// handle dragend
if(go.drag.moving) {
go.drag.moving = false;
go.drag.node._handleEvent('dragend', evt);

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

20
src/Node.js
View File

@@ -36,12 +36,24 @@ Kinetic.Node = function(config) {
this.setAttrs(config);
// bind events
this.on('draggableChange.kinetic_reserved', function() {
this.on('draggableChange.kinetic', function() {
if(this.attrs.draggable) {
this._listenDrag();
}
else {
// remove event listeners
this._dragCleanup();
/*
* force drag and drop to end
* if this node is currently in
* drag and drop mode
*/
var stage = this.getStage();
var go = Kinetic.GlobalObject;
if(stage && go.drag.node && go.drag.node._id === this._id) {
stage._endDrag();
}
}
});
/*
@@ -734,7 +746,7 @@ Kinetic.Node.prototype = {
this._dragCleanup();
var go = Kinetic.GlobalObject;
var that = this;
this.on('mousedown.initdrag touchstart.initdrag', function(evt) {
this.on('mousedown.kinetic_initdrag touchstart.kinetic_initdrag', function(evt) {
that._initDrag();
});
},
@@ -755,8 +767,8 @@ Kinetic.Node.prototype = {
* remove drag and drop event listener
*/
_dragCleanup: function() {
this.off('mousedown.initdrag');
this.off('touchstart.initdrag');
this.off('mousedown.kinetic_initdrag');
this.off('touchstart.kinetic_initdrag');
},
/**
* handle node event

5
src/Stage.js
View File

@@ -36,11 +36,11 @@ Kinetic.Stage = function(config) {
this._bindContentEvents();
//change events
this.on('widthChange.kinetic_reserved', function() {
this.on('widthChange.kinetic', function() {
this._resizeDOM();
});
this.on('heightChange.kinetic_reserved', function() {
this.on('heightChange.kinetic', function() {
this._resizeDOM();
});
var go = Kinetic.GlobalObject;
@@ -784,6 +784,7 @@ else if(!isDragging && this.mouseMove) {
_endDrag: function(evt) {
var go = Kinetic.GlobalObject;
if(go.drag.node) {
// handle dragend
if(go.drag.moving) {
go.drag.moving = false;
go.drag.node._handleEvent('dragend', evt);

62
tests/js/functionalTests.js
View File

@@ -76,6 +76,68 @@ Test.prototype.tests = {
});
});
},
'DRAG AND DROP - cancel drag and drop by setting draggable to false': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200,
throttle: 999
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Ellipse({
x: 380,
y: 100,
radius: 70,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
draggable: true
});
var dragStart = false;
var dragMove = false;
var dragEnd = false;
circle.on('dragstart', function() {
dragStart = true;
});
circle.on('dragmove', function() {
dragMove = true;
});
circle.on('dragend', function() {
dragEnd = true;
});
circle.on('mousedown', function() {
circle.setDraggable(false);
});
layer.add(circle);
stage.add(layer);
/*
* simulate drag and drop
*/
stage._mousedown({
clientX: 380,
clientY: 100
});
stage._mousemove({
clientX: 100,
clientY: 100
});
stage._mouseup({
clientX: 100,
clientY: 100
});
test(circle.getPosition().x === 380, 'circle x should be 380');
test(circle.getPosition().y === 100, 'circle y should be 100');
},
'DRAG AND DROP - drag and drop layer': function(containerId) {
var urls = dataUrls['DRAG AND DROP - drag and drop layer'];
var stage = new Kinetic.Stage({