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/