Reputation: 11468
This might be a silly question to ask if I am missing a key point. I want to create a draggable which is resizable too. I don't know what is the proper way to do it but I did something like this:
$('#MYID').resizable();
$('#MYID').draggable();
Now I want to move it to some position and when everything is finalized save the position using: $('#MYID').ui-position
. I am not sure how to implement the callback function in this case. If I use callback in like this:
$('#MYID').resizable();
$('#MYID').draggable()(Function()({....callback code for ui-position})
This is okay if the user does not resize the draggable after placing it in one position but what if he does?
How can I set one callback happening after the completion of two events?
Upvotes: 0
Views: 236
Reputation: 28703
Because jQuery objects are chainable, to make you element both draggable and resizable, you can do this:
$('#MYID').resizable().draggable();
Then, it doesn't really matter if you call the same event handler twice because you only want to save the final position. So, you can just register both events like this:
$('#MYID').on('resizestop dragstop', function(event, ui) {
alert(ui.offset); /* or whatever */
}
Upvotes: 0
Reputation: 82267
Have them both set a flag, and then use a conditional that if both flags are set call the completion function
var flagA = 0;
var flagB = 0;
...
completeResize:
flagA = 1;
if(flagA && flagB)completionFunction();
...
completeDraggable:
flagB = 1;
if(flagA && flagB)completionFunction();
Upvotes: 1
Reputation: 1067
There's an interesting plugin called eventstack. It lets you bind events to either the top or the bottom of the event queue. I don't know how general your problem is, or whether you're looking to reverse or to arbitrarily order events in your stack, but the plugin may simplify your task.
Upvotes: 0