JQuery drag-and-drop list with interactive objects inside - preventing clicking on drag and drop

Question

I have ul that is being dragged and in li there are anchors that I want to deactivate while dragging so that they do not fire after the draggable.stop () event is fired.

<ul class="draggable-list"> <li class="list-item"><a href="#">clickable child</a></li> <li class="list-item"><a href="#">clickable child</a></li> ... </ul> 

This seems like a situation: Preventing click event with jQuery drag and drop

But my draggable element is not my clickable element, my drag element contains my clickable elements.

I tried the code from the link above, but since it refers to a drag and drop object, it does not interfere with the clicks correctly:

 $("ul.draggable-list").draggable({ start: function(event, ui) { ui.helper.bind("click.prevent", function(event) { event.preventDefault(); }); }, stop: function(event, ui) { setTimeout(function(){ui.helper.unbind("click.prevent");}, 300); } }) 

I tried this to directly point out the elements that I want to disable, but this leads to triggering a click on the first attempt to drag and then preventing ALL clicks (drag or not) afterwards:

 $("ul.draggable-list").draggable({ start: function() { $(".list-item a").bind("click.prevent", function(event) { event.preventDefault(); }); }, stop: function() { setTimeout(function(){$(".list-item a").unbind("click.prevent");}, 300); } }) 

I'm not sure how to change ui.helper.bind so that it binds to interactive children, not to the draggable parent.

Answer 1

Based on the example here: http://www.west-wind.com/Weblog/posts/762598.aspx

I earned it like this:

 start: function(e) { $(".list-item a").unbind("click"); }, stop: function(e) { setTimeout(function() { $(".list-item a").click(function (){...}); }, 300); }