jquery draggable droppable删除掉了

如何从购物车中删除该项目？

当然，您希望能够将项目拖放回去。

$(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" ); } }); }); 
 
 $(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(); $("
").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 droppable; 这个区域只接受cart-item 。 发生丢弃后，它会调用remove()从购物车中删除商品。

看到它在这里工作： http ： //jsfiddle.net/andrewwhitaker/t97FE/embedded/result/

您可以将项目从购物车拖回目录中的任何类别，但我认为将项目仅拖放到其原始类别是非常容易的。