jQuery可拖动图像，当鼠标超出范围时停止拖动（div）

Question

我在一个 div 内有一个可拖动的图像。但是，我想这样做，如果当用户按下鼠标并拖动元素/ div 时，当鼠标向下或其边界时鼠标移出 div 时，它将不再可拖动。当按下控件上的按钮时启用拖动，该按钮可以正常工作。我只是希望能够在鼠标超出特定 div / 元素的范围时停止拖动。

这是复合控件的一部分，因此当页面加载时，脚本会在页面中注册。

jQuery.fn.Draggable = function (button) {

    if (button.value == "Off") {

        button.value = "On";
        this.draggable({ cursor: "hand" });


    } else {
        button.value = "Off";
        this.draggable("destroy");
    }
}

jQuery.fn.Drag = function (button) {
    this.Draggable(button);
}

提前致谢。

编辑：

我已经使用了遏制，但我不想将图像固定在 div 中。我希望图像能够越界，但是当鼠标越界时它会停止拖动。

所以当鼠标移出 div 框时，拖动停止。我不想在 div 中包含对象。我已经对它进行了修改。

Answer 1

你能在包含的 div 上注册 mouseenter/mouseleave 事件以启用/禁用拖动功能吗？

$('div#container').mouseenter(function(event) {
    // enable dragging

}).mouseleave(function(event) {
    // disable dragging

});