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

Posted 2023-05-08

【中文标题】带有可点击对象的jQuery可拖动列表 - 防止点击拖动

【英文标题】：jQuery draggable list with clickable objects within - preventing click on drag

【发布时间】：2010-12-31 05:35:04

【问题描述】：

我有一个可拖动的 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 以使其绑定到可点击的子级而不是可拖动的父级。

【参考方案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);