Jquery .trigger('stop') method for .draggable

Question

$('#element').draggable ({
    stop: function () {
        alert ('stopped');
        //do some action here
    }
}).trigger('stop');

nothing happens, thought #element is draggable now and event does execute after drag is complete. I tried .triggerHandle as well as 'dragstop' as eventtype, no luck

score 6 · Accepted Answer · answered Aug 28 '10 at 12:19

6

Use this to trigger it instead:

.trigger('dragstop')

If you want it to behave completely as a normal event, use .bind('dragstop', function) to attach it as well, the start option behaves slightly differently.

answered Aug 28 '10 at 12:19

Nick Craver

623,446
136
1,297
1,155

1

@selytch - did you try using .bind()? The callback is treated a bit different than a straight bind being called is here. – Nick Craver Aug 28 '10 at 12:23
Thanks, that works! I did not realize .bind works differently. Is this documented? (probably yes...) – selytch Aug 28 '10 at 12:53
1

@selytch - nope, not well documented at all, just something you notice when loooking at the jQuery UI source, I agree it needs to be noted better somewhere. – Nick Craver Aug 28 '10 at 12:56

score -1 · Answer 2 · edited Jul 17 '13 at 23:59

I know this is an old question, but now it is possible to trigger the actual drag event of jquery ui instead of the dragstart and dragstop by using the jQuery simulate plugin.

Here is the code I used because I needed access to the snapping elements of my resizable object (data only accesible on drag stop)

$(this).resizable({
    handles: 'e',
    stop: function (e, ui) {
        var resizable = ui.element;             
        resizable.simulate("mousedown", {clientX: e.clientX, clientY: e.clientY});
        resizable.simulate("mousemove", {clientX: e.clientX + 10, clientY: e.clientY + 10});
        resizable.simulate("mouseup", {clientX: e.clientX, clientY: e.clientY});
    }
});

Jquery .trigger('stop') method for .draggable

2 Answers2

Linked