购物车 - 拖放错误答案

【问题标题】：Shopping cart - Drag and Drop bug购物车 - 拖放错误
【发布时间】：2013-11-29 12:49:27
【问题描述】：

我已经根据例子实现了jQuery的购物卡：http://jsfiddle.net/RR6z5/1/

但是有一个小错误。当我将一个元素从产品拖到购物卡，然后无拖放时，我从购物卡拖到产品，产品中的原始元素消失了。如何避免这种情况？

谢谢。

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


});

【问题讨论】：

如果我是对的，你想解决的问题是，如果你开始拖动一个项目，但没有把它放到#cart 元素中，原来的项目会消失。
是的，有什么解决办法吗？
已经回答了。你没看到答案列表吗...
是的，汤姆，对不起。完美的答案，非常感谢。

标签： javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案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");
        }
    });


});

您可以在http://jsfiddle.net/RR6z5/30/查看它

【讨论】：

【解决方案2】：

试试这个扩展Drag and Drop to cart。它将帮助您拖动多个产品，并一键将所有产品添加到购物车。

【讨论】：