jQuery UI 可拖动元素放入可排序

Posted 2023-05-08

【中文标题】jQuery UI 可拖动元素放入可排序

【英文标题】：jQuery UI draggable element dropped into sortable

【发布时间】：2012-09-19 12:11:16

【问题描述】：

我有一个可拖动项目的列表，我希望能够将它们拖动到可排序的内容块上。这是我的标记：

<div class='items'>
    <div class="one">One</div>
    <div class="two">Two</div>
</div>

<div class="content">
    <div class="block">Foo</div>
    <div class="block">Bar</div>
</div>

问题是，我希望拖动的项目在拖动开始后立即“变成”一个块，并在它被放下时保持一个块。我试过这个：

$('.items div').draggable(
    helper: function(e) 
        return $('<div>').addClass('block').text( $(e.target).text() );
    ,
    connectToSortable: ".content"
);

$('.content').sortable();​

小提琴：http://jsfiddle.net/MF4qu/

但是，即使我创建了一个看起来像块的自定义助手，它也会在它被拖放后立即恢复为原始拖动元素。有谁知道如何在我的示例页面中正确插入一个块？我已经查看了 UI API，但无法弄清楚。

​

【问题讨论】：

在拖动事件结束时（例如在sortupdate 事件中），您能否将block 类添加到放置的元素？

您有机会尝试我的解决方案吗？

【参考方案1】：

当可拖动元素被放入可排序元素时，它会触发可排序元素update 事件。一种解决方案是监听该事件，并将放置的项目变成一个块：

$('.items div').draggable(
    helper: function(e) 
        return $('<div>').addClass('block').text( $(e.target).text() );
    ,
    connectToSortable: ".content"
);

$('.content').sortable(
    update: function (event, ui) 
        ui.item.addClass('block');
    
);​

工作演示： http://jsfiddle.net/DaXuT/1/

【讨论】：

不应该隐藏第一个可拖动对象吗？