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

});