jquery draggable droppable删除掉了 [英] jquery draggable droppable remove dropped

问题描述

如何从购物车中删除商品？

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

推荐答案

这应该有效：

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

注释：

• 当一个项目被放在购物车区域时，我已经在新项目中添加了一个 cart-item 类。


• 我已经制作了目录的 ul droppable;此区域仅接受 cart-item s。它会调用 remove（），以便在发生丢弃后从购物车中删除商品。

• When an item is dropped on the cart area, I've added a class of cart-item to the new item.
• I've made the catalog's ul droppable; this area only accepts cart-items. It calls remove() to remove an item from the cart once the drop has occurred.

看到它在这里工作： 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.

这篇关于jquery draggable droppable删除掉了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！