如何在鼠标单击时设置可拖动事件

How to set the draggable event on mouse click?

本文关键字：设置 拖动 事件 单击 鼠标      更新时间：2023-09-26

我可以设置同时单击和拖动鼠标左键和右键时阶段的可拖动事件吗？

如果要在按下左右按钮之前阻止拖动，则可以设置形状的dragBoundFunc以限制所有拖动，直到您说可以拖动为止（当您看到两个按钮都向下时）

这里有一个关于dragBoundFunc的链接：

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

下面是一些入门代码：

// 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
        }
    }
}
相关文章：