Question

我有一个我用jQuery UI设置的图像可以拖动。这工作正常，但现在我希望能够按住Shift键拖动图像在图像上绘制一个框，而不是让它移动。因此，如果按住Shift键，我不想进行拖动。

我试过把

if(e.shiftKey)return;

在drag_start，dragging和drag_stop函数的顶部，但是这没有做任何事情，因为拖拽操作似乎是在jQuery UI内部完成的，而对drag_start，dragging和drag_stop的调用只是礼貌的调用让你知道jQueryUI目前在做什么。

如果按住Shift键，有没有办法禁用拖动？

由于

（有关此内容的详细信息，请参阅下面的“答案”，并附上一个jsfiddle。）

Answer 1

start_drag如果换档键然后return false;（不要启动拖动）

function box_start_drag(e, ui) {
    if(e.shiftKey)
        return false;
}

Fiddle

或者在按住shift的任何时候停止拖动。将返回false设置为drag方法，如Dom在以下评论中所建议的那样。

Answer 2

我很确定这是如何完成的，但我还没有测试过。你需要一个关键的监听器，你可以将它放在任何地方，拖动的元素或身体上。然后，当您按下shift键时，它将打开或关闭开关。

var shift=false;
$("body").keydown(function(e){
    if(e.shiftKey){
        shift=true;
    }
}).keyup(function(e){
    if(e.shiftKey && shift){
        shift=false;
    }
});

$("#draggable").draggable({
    drag:function(e){
        if(shift){
            return;
        }
    }
});

这个问题的一个问题是，如果放开换档键，我相信你仍然会拖动...再次，这不会被测试，但应该让你运行起来。

Answer 3

我认为一个解决方案可能是让拖动处理程序在按住Shift的情况下继续将位置设置回原始位置。 js在这里摆弄 - http://jsfiddle.net/26Gf4/ - 尝试这样做，将图像替换为div以使事情变得更简单，但它不起作用。 console.log表示该框被放回到每个拖动条目的原始位置，但该框随着拖动一直移动。 box_stop_drag（）处理程序中的相同重置代码可以正常工作。

var drag_startPosition;

var box_dragOps = { 
        start : box_start_drag,
        drag  : box_dragging,
        stop : box_stop_drag
    };

$('#box').draggable(box_dragOps);


function box_start_drag(e, ui) {
    drag_startPosition = ui.position;
}

function box_dragging(e,ui) {

    if(e.shiftKey) {
        ui.helper.css({'top':drag_startPosition.top, 'left':drag_startPosition.left});
        console.log("box_dragging: setting position back to top="+drag_startPosition.top+" left="+drag_startPosition.left); 
        return;
    }
}

function box_stop_drag(e, ui) {
    ui.helper.css({'top':drag_startPosition.top, 'left':drag_startPosition.left});
        console.log("box_stop_drag: setting position back to top="+drag_startPosition.top+" left="+drag_startPosition.left); 
        return;
}

如果按住Shift键，则禁用拖动

3 个答案: