带有可点击对象的jQuery可拖动列表 - 防止点击拖动

Question

我有一个可拖动的 ul，并且我想在拖动过程中停用 li 中的锚点，以便一旦 draggable.stop() 事件触发它们就不会被触发。

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

与此类似的情况： Preventing click event with jQuery drag and drop

但我的可拖动项目不是我的可点击项目，我的可拖动项目包含我的可点击项目。

我已经尝试了上面链接中的代码，但是因为它引用了可拖动对象，所以它不能正确阻止点击：

$("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);
    }
})

我试过这个，直接指向我想禁用的元素，但这会在第一次拖动尝试时启动点击，然后阻止所有点击（拖动或不拖动）：

$("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);
    }
})

我不确定如何更改 ui.helper.bind 以使其绑定到可点击的子级而不是可拖动的父级。

Answer 1

基于此处的示例：http://www.west-wind.com/Weblog/posts/762598.aspx

我就这样搞定了：

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