jQuery draggable list with clickable objects within - preventing click on drag

Question

I have a ul that is draggable, and there are anchors in the li's that I want to deactivate during the drag so that they're not triggered once the draggable.stop() event triggers.

<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>

It's a similar situation to this: http://stackoverflow.com/questions/1771627/preventing-click-event-with-jquery-drag-and-drop/1771635#1771635

But my draggable item is not my clickable item, my draggable item contains my clickable items.

I've tried the code from the above link, but because it's referencing the draggable object, it doesn't prevent 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 to the elements I want to disable, but this has the effect of initiating a click on the first drag attempt, and then preventing ALL clicks (dragged 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 unsure how to alter the ui.helper.bind so that it's binding to the clickable children rather than the draggable parent.

Answer 1

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

I got it working thusly:

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