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,但我无法弄明白.

?

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/