jquery draggable droppable remove dropped

Question

¿Cómo se eliminaría el artículo del carrito de compras?

Naturalmente, es posible que desee poder arrastrar y soltar el elemento de nuevo.

$(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

Esto debería funcionar:

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

Notas:

• Cuando un elemento se deja caer en el área de la compra, he añadido una clase de cart-item para el nuevo elemento .
• He hecho el catálogo ul droppable; esta área solo acepta cart-item s. Llama al remove() para eliminar un artículo del carrito una vez que ha ocurrido la caída.

ver su funcionamiento aquí: http://jsfiddle.net/andrewwhitaker/t97FE/embedded/result/

Puede arrastrar un elemento posterior de la carreta a cualquier categoría en el catálogo, pero yo creo que sería bastante fácil de hacer sólo los elementos que pueden arrastrarse a sus categorías originales.