JQuery-UI - 可拖動和可拖動的交互所需的幫助

我正在學習JQuery & JqueryUI通過構建一個簡單的購物列表APP。JQuery-UI - 可拖動和可拖動的交互所需的幫助

我有兩個部分，一個是捕捉用戶輸入和「TO-DO」一節中創建列表，另一個是「購買」部分，在那裏用戶可以刪除逛過項目（「從'TO-DO'部分」）拖動它們。

我從「待辦事項」部分拖動元素並將元素拖放到「已購買」部分存在問題。 我嘗試使用「drop」事件處理程序查找可接受的「可放置項目」並將其附加到「已購買」部分。同時調試元素被附加到購買的列表（正如我在Chrome調試器中看到的那樣），但顯示：無，但最終會被添加到「TO-DO」部分本身中。請幫助我實現此功能將它們放入購買的部分和拖動和待辦事項部分

這裏掉落購買部分是代碼片段相關的拖放功能

$(function(){ 
 
\t var $donediv = $(".donediv"); 
 
\t var $todo = $('#todolist'); 
 
\t var $donelist = $('#donelist'); 
 

 
\t var $todoItem = $(".todoitem"); 
 
\t var $purchaseditem = $(".purchaseditem"); 
 
\t 
 
\t $todo.sortable({ 
 
\t \t revert:true 
 
\t }); 
 
    
 
    $todoItem.draggable({ 
 
     connectToSortable: "#todolist", 
 
     containment: parent, 
 
     cursor: 'move', 
 
     revert: true, 
 
    }); 
 

 
    $purchaseditem.draggable({ 
 
    \t containment:parent, 
 
    \t cursor: 'move' 
 
    }); 
 

 
    $donelist.droppable({ 
 
    \t accept: '#todolist > li', 
 
    \t activeClass: "ui-state-highlight", 
 
    \t drop: function(event, ui){ 
 
      alert(ui.draggable); 
 
    \t \t dropItem(ui.draggable); 
 
    \t } 
 
    }); 
 

 
    function dropItem($item){ 
 
    \t //console.log($item); 
 
    \t $item.fadeOut(function(){ 
 
    \t \t //console.log($("li", "#donelist")); 
 
    \t \t $item.removeClass('todoitem').addClass('purchaseditem'); 
 
    \t \t $list = $("#donelist"); 
 
    \t \t $list.append($item); 
 
    \t \t alert("dropped"); 
 
      $item..appendTo($list); 
 
    \t \t /*$item.appendTo($list).fadeIn(function(){ 
 
    \t \t \t $item.css("background-color", "#FF5555") 
 
    \t \t });*/ 
 
    \t }); 
 
    } 
 
    
 
});

：

這是JS Fiddl E：http://jsfiddle.net/sivajs/hudqfrfz/7/

請指導我如何實現這個功能

來源

2015-05-01 sivaJS