JQuery draggable image, mouse dragging when mouse goes out of bounds (div)

I have a drag and drop image in a div working. However, I would like to do this if as long as the user has the mouse and drags the element / div, when the mouse is outside the div, when its down or its borders will no longer be dragged. Dragging is activated when a button on the remote control that functions correctly is pressed. I just would like to be able to stop dragging when the mouse moves outside of a certain div / element.

It's part of a composite control, so when the page loads, 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've already used containment, but I don't want the image to be locked 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 moves out of the div box, the dragging stops. I don't want to contain an object inside a div. I've already fiddled with it.

+3


source to share


1 answer


Can you log mouseenter / mouseleave events on the containing div that enables / disables the drag and drop functionality?



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

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

});

      

+1


source







All Articles