Menu
I have a jQuery UI Sortable list. The sortable items also have a click event attached. Is there a way to prevent the click event from firing after I drag an item?
$().ready( function () { $('#my_sortable').sortable({ update: function() { console.log('update') }, delay: 30 }); $('#my_sortable li').click(function () { console.log('click'); }); });#my_sortable li { border: 1px solid black; display: block; width: 100px; height: 100px; background-color: gray; }<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> <ul id="my_sortable"> <li id="item_1">A</li> <li id="item_2">B</li> <li id="item_3">C</li> </ul> 
873
I had the same problem and since my sortable items contained three or four clickable items (and the number was variable) binding/unbinding them on the fly didn't really seem an option. However, by incident I specified the
helper : 'clone' option, which behaved identically to the original sortable in terms of interface but apparently does not fire click events on the dragged item and thus solves the problem. It's as much a hack as anything else, but at least it's short and easy..
51
If you have a reference to the click event for your li, you can unbind it in the sortable update method then use Event/one to rebind it. The event propagation can be stopped before you rebind, preventing your original click handler from firing.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> <script type="text/javascript" charset="utf-8"> var myClick = function () { console.log('click'); }; $().ready( function () { $('#my_sortable').sortable({ update: function(event, ui) { ui.item.unbind("click"); ui.item.one("click", function (event) { console.log("one-time-click"); event.stopImmediatePropagation(); $(this).click(myClick); }); console.log('update') }, delay: 30 }); $('#my_sortable li').click(myClick); }); </script> <style type="text/css" media="screen"> #my_sortable li { border: 1px solid black; display: block; width: 100px; height: 100px; background-color: gray; } </style> </head> <body> <ul id="my_sortable"> <li id="item_1">A</li> <li id="item_2">B</li> <li id="item_3">C</li> </ul> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
