jQuery UI可拖動和可拖動的交互

Question

我在創建2個列表視圖之間的交互時遇到問題。

我跟着這個線程的解決方案： JQuery UI - Append Draggable to Droppable

這是

$(myDroppable).droppable({ 
    drop:function(event, ui) { 
     ui.draggable.detach().appendTo($(this)); 
    } 
}); 

然而，跌落時，李項有一個奇怪的位置，我不知道是什麼原因造成的。 的jsfiddle：http://jsfiddle.net/lightbringer/W3p7d/2/

我創造了另一個解決自己：

 $("#personlisting_assign").droppable({ 
     accept: "#wrapper_projectpersonlist li", 
     drop: function(event, ui) { 
      var el = ui.draggable[0].outerHTML; 
      ui.draggable.remove(); 
      $("#personlist").append(el); 
      $("#personlist li").removeAttr("style"); 
     } 
    }); 

它完美，但一旦一個元素被移到我不能將其移回舊列表。

的的jsfiddle這一個是在這裏：http://jsfiddle.net/lightbringer/W3p7d/

我的想法是可以自由2和列表視圖之間移動的項目。是的，我已經看過connectSortTable解決方案，但我想放置一個區域的項目，它會自動添加到該區域的列表視圖。

您能否就上述兩個解決方案以及如何解決每個問題提供建議。在此先感謝

Answer 1

嘗試

$("#personlisting_assign").droppable({ 
     accept: "#wrapper_projectpersonlist li", 
     drop: function (event, ui) { 
      ui.draggable.detach().appendTo('#personlist').removeAttr("style"); 
     } 
    }); 

    $("#projectperson").droppable({ 
     accept: "#wrapper_personlist li", 
     drop: function (event, ui) { 
      ui.draggable.detach().appendTo($("#projectpersonlist")).removeAttr("style"); 
     } 
    }); 

演示：Fiddle