我已根据示例实现了jQuery的购物卡:http://jsfiddle.net/RR6z5/1/
但是有一点小虫子。当我将一个元素从产品拖到购物卡然后不丢弃时,我会从购物卡拖到产品,从Product dissapears中删除原始元素。怎么避免这个?
感谢。
$(function () {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone"
});
$("#cart ol").droppable({
out: function (event, ui) {
var self = ui;
ui.helper.off('mouseup').on('mouseup', function () {
$(this).remove();
self.draggable.remove();
});
},
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
if (ui.draggable.is('.dropped')) return false;
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this).draggable({
appendTo: "body",
helper: "clone"
}).addClass('dropped');
}
}).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");
}
});
});
答案 0 :(得分:1)
请注意我修改了一些内容:
if(self.draggable.parents('#cart').length){
self.draggable.remove();
}
查询确保在#cart元素中拖动元素,然后将其删除。
如果拖动的元素是原始元素(必须不在#cart
元素中但在#products
元素中),则不会删除该元素。
$(function () {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone"
});
$("#cart ol").droppable({
out: function (event, ui) {
var self = ui;
ui.helper.off('mouseup').on('mouseup', function () {
$(this).remove();
if(self.draggable.parents('#cart').length){
self.draggable.remove();
}
});
},
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
if (ui.draggable.is('.dropped')) return false;
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this).draggable({
appendTo: "body",
helper: "clone"
}).addClass('dropped');
}
}).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");
}
});
});
上查看
答案 1 :(得分:0)
试用此扩展程序Drag and Drop to cart。它可以帮助您拖动多个产品,只需点击一下,所有产品都会添加到购物车中。