jquery draggable droppable удалить упаденный

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' 
    }); 
}); 

Notes:

• Когда элемент отбрасывается на корзину площади, я добавил класс cart-item к новому пункту ,
• Я сделал каталог ul droppable; эта область принимает только cart-item s. Он вызывает remove(), чтобы удалить товар из корзины после того, как произошла капля.

Смотреть это работает здесь: http://jsfiddle.net/andrewwhitaker/t97FE/embedded/result/

Вы можете перетащить элемент обратно из корзины в любую категорию в каталоге, но я думаю, что это было бы довольно легко сделать вещи перетаскивать только исходные категории.