set timeout for jQuery UI draggable() to prevent locking effect

Question

I'm using draggable(), but occasionally the draggable() seems to create a locking effect where the dragging effect persists even after the mouse button is released. Once this happens, the only fix is to refresh the page, which is a terrible way to go for an ajax-based site.

So using the UI docs I'm trying to figure out a way to set a timeout when dragging starts, so that if the dragging isn't finished within x seconds, then the dragstop event will be called.

I imagine this wouldn't be hard, but I haven't been able to implement it so far. Any help would be very much appreciated.

Answer 1

Try something like this:

var stopDrag = function() {
    $('.selector').draggable('destroy');
}

$('.selector').draggable({
    start: function(event, ui) { 
        setInterval(stopDrag, 2000); 
    }
});

Answer 2

i hate to suggest this, but I'd spend a little more time trying to understand out WHY you can't get draggable to work properly rather than asking about hacking in a bandaid fix...