I have a kinetic stage and some objects that each are draggable. (See fiddle for example.)
My goal is to allow the user to always be able to middle click to pan the entire stage whether or not he middle clicks on empty space or on any shape drawn to the stage. I need to do this in a way that doesn't break the drag events of existing shapes. Meaning I need the shape dragStart and dragEnd events to be processed normally, but only on left click drag.
I'm able to detect the middle click event on the stage and call dragStop() on the shape if the drag was initiated on one, but calling dragStop() means that the dragstop event is fired and processing occurs on the shape.
// let's pretend that a mouse doesn't have more than 9 buttons
var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0];
var mouseDownCount = 0;
document.body.onmousedown = function(evt) {
++mouseDown[evt.button];
++mouseDownCount;
}
document.body.onmouseup = function(evt) {
--mouseDown[evt.button];
--mouseDownCount;
}
stage.on('dragstart', function(e){
if(mouseDownCount){
if(mouseDown[0]){
// Left mouse button drag
if (e.target.nodeType == 'Stage'){
// stop the drag for left click
e.target.stopDrag();
}
} else if (mouseDown[1]){
// Middle mouse button drag
if (e.target.nodeType != 'Stage'){
// stop the drag of the object for left click
e.target.listening(false);
e.target.stopDrag();
e.target.listening(true);
// start the stage drag
e.target.getStage().startDrag()
}
}
}
});
Is there a way to cancel the dragStart event after it has been fired, or in some other way tell dragEnd to not fire? I've tried setting e.target.listening(false) prior to calling dragStop, but that doesn't seem to be working.
Any ideas?
