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

引用了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的产品可以拖放到其他购物车容器而不是它本身，而副versa.Eg：

问题是：

当产品已在S *被丢弃hoppingCart1 *，然后我可以拖放的产品shoppingCart1至其他购物车集装箱。但似乎当我拖放自己的产品时，它也追加的产品。我的意思是当我拖动shoppingCart1的产品并放入shoppingCart1本身，它附加到shoppingCart1，也是。

非常感谢！从JQuery用户界面可放开我的代码重新编写的

部分：购物车〔实施例[不为我想工作]

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

来源

2011-01-22 qinHaiXiang

这将确保事情不会得到复制任何列表！它使用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/

来源

2011-01-30 02:59:24 PetersenDidIt

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

回答

相关问题