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を受け入れます。ドロップが発生すると、remove()を呼び出してカートからアイテムを削除します。

が、それはここで働いてください：http://jsfiddle.net/andrewwhitaker/t97FE/embedded/result/

あなたは、カタログ内の任意のカテゴリに戻って、カートからアイテムをドラッグすることができますが、私は元のカテゴリにのみドラッグ可能なアイテムを作るために非常に簡単になると思います。