3

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.

  • 1
    Why aren't you using the draggable functionality already available in jQuery UI: [http://jqueryui.com/demos/draggable/#constrain-movement]? I may have missed the point entirely :) ! – bm1729 Mar 20 '12 at 16:55
  • I have edited my original problem to be a bit clearer. –  Mar 20 '12 at 17:18

1 Answers1

0

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

});
pabo
  • 625
  • 3
  • 14