javascript jquery draggable droppable remove 删除
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4800299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery draggable droppable remove dropped
提问by Spechal
How would one remove the item from the shopping cart?
如何将商品从购物车中移除？
Naturally you would want to be able to drag and drop the item back.
自然地，您希望能够将项目拖放回去。
$(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" );
}
});
});
回答by Andrew Whitaker
This should work:
这应该有效：
$(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:
注意事项：
- When an item is dropped on the cart area, I've added a class of
cart-itemto the new item. - I've made the catalog's
uldroppable; this area only acceptscart-items. It callsremove()to remove an item from the cart once the drop has occurred.
- 当一个项目被放到购物车区域时，我
cart-item在新项目中添加了一个类。 - 我已经使目录
ul可放置；这个区域只接受cart-items。remove()一旦发生掉落，它会调用从购物车中移除商品。
See it working here: http://jsfiddle.net/andrewwhitaker/t97FE/embedded/result/
看到它在这里工作：http: //jsfiddle.net/andrewwhitaker/t97FE/embedded/result/
You can drag an item back from the cart to any category in the catalog, but I think it would be pretty easy to make items only draggable to their original categories.
您可以将项目从购物车拖回目录中的任何类别，但我认为让项目仅可拖动到其原始类别是很容易的。
