Search code examples
jqueryjquery-uijquery-ui-draggable

How to disable jQueryUI draggable while its in motion, and release the dragged div


Im building a game prototype in JS which uses sockets for communication (socket.io). When a command to disable dragging comes, I can either use the disable method, or destroy method. Both work fine (but differently) after the dragged div is released, however if the dragging is disabled while the div is being dragged (which is 100% of the time), the behavior is not what is expected.

disable - does nothing until the mouse is released, after which point its no longer draggable. destroy - kind of works. Smooth dragging stops, but Im still able to drag the div around and have it "warp" all over the screen, instead of being smooth. After its released, its no longer draggable.

So, my question is. How can I temporarily disable dragging behavior of a div while its being dragged, and have it stop dead in its tracks? Perhaps simulate the mouse release somehow?


Solution

  • Yes, doing what you described with a mouseup event will have exactly the behaviour you want:

    $("#myDraggable").trigger("mouseup");
    $("#myDraggable").draggable("disable");
    

    Here's a quick example: http://jsfiddle.net/8uwoss5f/