Best IT Recipes

JQuery UI Sortable - How can I cancel a click event on an element that was being dragged / sorted?

I have a jQuery UI sortable list. Sortable items also have an attached click event. Is there a way to prevent the click event from firing after dragging 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>
+64
javascript jquery jquery-ui
Jun 03 '09 at 20:56
source share
10 answers

I had the same problem, and since my sortable elements contained three or four elements that could be clicked (and the number was variable), linking / decoupling them on the fly really wasn't an option. However, on the incident, I indicated

 helper : 'clone'

which behaves identically to the original one, sorted from the point of view of the interface, but, apparently, does not cause a click event on the dragged element and, thus, solves the problem. It's like hacking like anything else, but at least it's short and easy.

+129
Jun 04 2018-10-06T00:
source share

If you have a link to the click event for yours, you can cancel it in the sorted update method, and then use Event / one to re-bind it. Event propagation can be stopped before you reinstall it to prevent the original click handler from starting.

 <!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>
+13
Jun 03 '09 at 21:57
source share

If for some reason you don't want to use the helper:'clone' trick, this worked for me. It cancels the click event on the item that is being dragged. jQuery adds the ui-sortable-helper class to the item being dragged.

 $('.draggable').click(clickCancelonDrop); function clickCancelonDrop(event) { var cls = $(this).attr('class'); if (cls.match('ui-sortable-helper')) return event.stopImmediatePropagation() || false; }
+3
Nov 17 '15 at 14:35
source share
 $('.selector').draggable({ stop: function(event, ui) { // event.toElement is the element that was responsible // for triggering this event. The handle, in case of a draggable. $( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } ); } });

This works because the "classmates" quit in front of the "normal" listeners. Therefore, if one listener stops distributing, he will never reach your previously established listeners.

+2
Dec 20
source share

Merlsor's answer gave me a few warnings. The click event was actually on the handle element, not on the sorted element. Unfortunately, the ui object does not give you a reference to the handle to the update event (request for the jquery ui? So I had to take a pen myself. In addition, I had to call preventDefault to stop the click action.

 update: function(ev, ui) { var handle = $(ui.item).find('h3'); handle.unbind("click"); handle.one("click", function (event) { event.stopImmediatePropagation(); event.preventDefault(); $(this).click(clickHandler); }); // other update code ...
+1
Jan 13 '10 at 7:55
source share

More simply, use var to know when an element is sorted ...

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <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"> $().ready( function () { $('#my_sortable').sortable({ start: function() { sorting = true; }, update: function() { console.log('update'); sorting = false; }, delay: 30 }); $('#my_sortable li').click(function () { if (typeof(sorting) == "undefined" || !sorting) { console.log('click'); } }); }); </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>
+1
Sep 15 '10 at 22:52
source share

We can also use the flag in the stop event and check this flag on the click event.

 var isSortableCalled = false; $('#my_sortable').sortable({ stop: function(event, ui){ isSortableCalled = true; }, update: function() { console.log('update') }, delay: 30 }); $('#my_sortable li').click(function () { if(!isSortableCalled){ console.log('click'); } isSortableCalled = false; });
+1
Nov 08 '13 at
source share

One solution is to use live () instead of normal binding, but the Elte Hupkes Rock solution !!!!

0
Jun 03 2018-11-11T00:
source share

Thanks to Elte Hupkus ;

 helper: 'clone'

I implemented the same and the sample is shown below.

 $(document).ready(function() { $("#MenuListStyle").sortable({ helper:'clone', revert:true }).disableSelection(); });
-one
Dec 31 '15 at 5:37
source share
 $('.menu_group tbody a').click(function(){ link = $(this).attr('href'); window.location.href = link; });

This solution works for me. Now I can click clickables inside the items to be sorted.

Note: ".menu_group tbody" is .sortable();

-one
Feb 19 '15 at 17:57
source share


More articles:


All Articles