jQuery UI的拖动元素投进排序(jQuery UI draggable element dro

我可拖动的项目清单，我希望能够将它们拖曳到排序的内容块。 这里是我的标记：

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

文章来源: jQuery UI draggable element dropped into sortable