jQuery draggable image, stop dragging when mouse out of bounds(div)

Question

I have a draggable image within a div functioning. However I would like to make it so if while the user has the mouse down and is dragging the element / div, when the mouse goes outside of the div when its down or its bounds it will no longer be draggable. The dragging is enabled when a button is pressed on the control, which functions correctly. I just would like to be able to stop dragging when the mouse goes out of bounds of a specific div / element.

This is part of a composite control so when the page loads, the scripts are registered with the page.

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);
}

Thanks in advance.

Edit:

I have used containment already but I dont want the image fixed inside the div. I want the image to be able to go out of bounds, but when the mouse goes out of bounds it will stop dragging.

So When the mouse goes outside the div box, dragging stops. I dont want to contain the object inside the div. I have already tinkered around with it.

Answer 1

Can you register mouseenter/mouseleave events on the containing div that enables/disables the dragging functionality?

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

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

});