CODEWITHSUNDEEP
javascripthtmlhtml5-canvaskineticjs
VijayB
VijayB

Reputation: 398

How to set the draggable event on mouse click?

Can i set the draggable event of a stage when both left and right mouse button is clicked and dragged at a same time.

Upvotes: 3

Views: 120

Answers (1)

markE
markE

Reputation: 105015

If you want to prevent dragging until both the left & right buttons are pressed, you can set a shape's dragBoundFunc to restrict all dragging until you say it's ok to drag (when you see both buttons are down)

Here's a link about dragBoundFunc:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-shapes-horizontally-or-vertically-tutorial/

Here's some code to get started:

// add properties to tell whether left/right buttons are currently down

myShape.leftIsDown=false;
myShape.rightIsDown=false;

// add mousedown to set the appropriate button flag to true

myShape.on("mousedown",function(event){
    if(event.button==0){this.leftIsDown=true;}
    if(event.button==2){this.rightIsDown=true;}
});

// add mouseup to set the appropriate button flag to false

myShape.on("mouseup",function(event){
    if(event.button==0){this.leftIsDown=false;}
    if(event.button==2){this.rightIsDown=false;}
});

// add a dragBoundFunc to the shape
// If both buttons are pressed, allow dragging
// If both buttons are not pressed, prevent dragging

dragBoundFunc: function(pos) {
    if(this.leftIsDown && this.rightIsDown){
        // both buttons are down, ok to drag
        return { pos }
    }else{
        // both buttons aren't down, refuse to drag
        return {
          x: this.getAbsolutePosition().x,
          y: this.getAbsolutePosition().y
        }
    }
}

Upvotes: 2

Related Questions