jQuery UI可拖动元素被放置到可排序列表中

Question

我有一些可拖动的元素，希望能将它们拖放到可排序的内容块中。以下是我的标记：

<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，但是我无法弄清楚。

​

- David Hellsing

---

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

你有机会尝试一下我的解决方案了吗？ - Andrew

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

- Andrew

---

你不应该隐藏第一个可拖动的对象吗？ - CupOfJava