ドラッグ可能な要素にドロップされ、他のコンテナにドラッグアンドドロップできますが、それ自体はドラッグされませんか？

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の製品は、ドラッグして他にドロップすることができますしたいですショッピングカートコンテナではなく、それ自体、および副versa.Eg：製品は秒で削除された場合にはhoppingCart1 * *

、そして私はで製品をドラッグ＆ドロップすることができます

問題がありますshoppingCart1 to 他の買い物カゴの容器。しかし、それ自身の中に製品をドラッグアンドドロップすると、の商品にが追加されたようです。つまり、shoppingCart1の商品をドラッグしてshoppingCart1にドロップすると、shoppingCart1にも追加されます。

ありがとうございました！ jQueryのUIドロップ可から自分のコードの再書き込みの

一部：！ショッピングカート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/