Question

引用了JQuery UI Droppable示例：购物车。我重写它进行测试。但是遇到了一些问题。

假设：

产品容器：将产品拖放到购物车容器中。

<div class="products">
  <ul>
    <li> product 1 </li>
    ...
  </ul>
</div>

和购物车容器：

<div class="shoppingCart1">
... dropped products here
</div>

和其他购物车容器：

<div class="shoppingCar2">
... dropped products here
</div>

我希望 shoppingCart1的产品可以拖放到其他购物车容器，但不能拖放到其他容器，反之亦然。反之亦然.E.g：

问题是：

当产品被放入s * hoppingCart1 *中，然后我可以将 shoppingCart1 中的产品拖放到其他购物车容器。但似乎当我将产品拖放到自己的产品中时，它也追加产品。我的意思是当我拖动 shoppingCart1的产品并放入 shoppingCart1 本身时，它也会附加到 shoppingCart1 。

非常感谢！

我的代码的一部分从JQuery UI Droppable重写：购物车exmaple！[不能按我的意愿工作]

this.igtoMDMovieList = $('<div />',{'class':'igtoMDMovieList'}) .appendTo(this.igtoMDMovieListWrapper); this.igtoMDMovieListOL = $('<ol />',{'class':'igtoMDMovieListOL'}) .html('<li class="placeholder">Add your items here</li>') .appendTo(this.igtoMDMovieList) .droppable({ accept:'li', drop: function( event, ui ) { $( "<li></li>" ) .text( ui.draggable.text() ) .appendTo(obj.igtoMDMovieListOL)//$(this).children() .draggable({ appendTo: "#desktopFrame", helper: "clone" }) } }) .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

这将确保任何列表中的内容都不会重复。它使用data-id属性为每个产品提供产品ID。

$("#products li").draggable({
    appendTo: "body",
    helper: "clone"
});
$(".shoppingCart ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        var self = $(this);
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length) return;
        $("<li></li>", {
            "text": ui.draggable.text(),
            "data-id": productid
        }).appendTo(this);
        // To remove item from other shopping chart do this
        var cartid = self.closest('.shoppingCart').attr('id');
        $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
    }
}).sortable({
    items: "li:not(.placeholder)",
    sort: function() {
        $(this).removeClass("ui-state-default");
    }
});

示例：http://jsfiddle.net/petersendidit/S4QgX/

拖入可拖动的元素拖放到其他容器但不是自己？

1 个答案: