jquery draggable droppable remove dropped

Question

如何從購物車中刪除商品？

當然，您希望能夠將項目拖回。

$(function() { 
     $("#catalog").accordion(); 
     $("#catalog li").draggable({ 
      appendTo: "body", 
      helper: "clone" 
     }); 
     $("#cart ol").droppable({ 
      activeClass: "ui-state-default", 
      hoverClass: "ui-state-hover", 
      accept: ":not(.ui-sortable-helper)", 
      drop: function(event, ui) { 
       $(this).find(".placeholder").remove(); 
       $("
").text(ui.draggable.text()).appendTo(this); 
      } 
     }).sortable({ 
      items: "li:not(.placeholder)", 
      sort: function() { 
       // gets added unintentionally by droppable interacting with sortable 
       // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options 
       $(this).removeClass("ui-state-default"); 
      } 
     }); 
    }); 

Answer 1

這應該工作：

$(function() { 
    $("#catalog").accordion(); 
    $("#catalog li").draggable({ 
     appendTo: "body", 
     helper: "clone" 
    }); 
    $("#cart ol").droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function(event, ui) { 
      $(this).find(".placeholder").remove(); 
      $("<li></li>").text(ui.draggable.text()) 
       .addClass("cart-item") 
       .appendTo(this); 
     } 
    }).sortable({ 
     items: "li:not(.placeholder)", 
     sort: function() { 
      $(this).removeClass("ui-state-default"); 
     } 
    }); 
    $("#catalog ul").droppable({ 
     drop: function(event, ui) { 
      $(ui.draggable).remove(); 
     }, 
     hoverClass: "ui-state-hover", 
     accept: '.cart-item' 
    }); 
}); 

注意：

• 當一個項目是在車面積銳減，我添加了一個類的cart-item新項目。
• 我製作了目錄的ul可放下;該區域只接受cart-item s。它呼叫remove()在發生跌落時從購物車中移除物品。

看到它在這裏工作：http://jsfiddle.net/andrewwhitaker/t97FE/embedded/result/

您可以將一個項目從車回目錄中的任何一類，但我認爲這將是很容易使項目僅可拖動到原來的類別。