jQueryUI的拖動和排序追加自定義HTML

Question

我有兩個列表，列表A是排序和列表B是可拖動連接列表A.我拖着名單B物品進入名單A.

項目在兩份名單有不同html結構。問題是，當我從名單B放置項目要列出，它會自動與它原始的HTML結構追加，所以最後的畫面是某事像：

list A 
<div class="sortableItem">bla bla</div> 
<div class="sortableItem">bla ble</div> 
<span class="draggableItem">bla bla</span> // This is the item coming from list B 
<div class="sortableItem">blew blew</div> 
. 
. 
. 

我想追加之前修改拖動項目它可以排序。這怎麼可能？

Answer 1

在您的droppabale容器的drop事件中，您可以訪問ui變量，其中包含有關拖動的所有信息div。

$("ul:first li", $tabs).droppable({ 
    accept: ".sortable .dragItem", 
    hoverClass: "ui-state-hover", 
    start: function (event, ui) {}, 
    stop: function (event, ui) {}, 
    receive: function (event, ui) {}, 
    drop: function (event, ui) { 

    //Here you can manipulate the dragged item to create whatever you want 
    var newDiv = '<div class="sortableItem">'+ui.draggable.html()+'toto</div>'; 

    //Add the new data to your container 
    $(this).append(newDiv); 
    //Or add to another container 
    //$('#sortable1').append(newDiv); 

    //Return true 
    return true; 
    }