title: Dropped in draggable elements drag and drop to other containers but not itself?
body: <p>After referenced the JQuery UI Droppable example : Shopping cart. I rewrite it for a test.But got some problem.</p>
  
  <p>Suppose that :</p>
  
  <p><strong>product container:</strong> drag and drop the product into shopping cart container.</p>
  
  <pre><code>&lt;div class="products"&gt;
    &lt;ul&gt;
      &lt;li&gt; product 1 &lt;/li&gt;
      ...
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>and shopping cart container:</strong></p>
  
  <pre><code>&lt;div class="shoppingCart1"&gt;
  ... dropped products here
  &lt;/div&gt;
  </code></pre>
  
  <p>and <strong>others shopping cart container</strong>:</p>
  
  <pre><code>&lt;div class="shoppingCar2"&gt;
  ... dropped products here
  &lt;/div&gt;
  </code></pre>
  
  <p>And I want the <strong>shoppingCart1's</strong> products can drag and drop to other <strong>shopping cart</strong> container but not itself，and vice versa.E.g:</p>
  
  <p><strong>the problem is:</strong></p>
  
  <p>When the products had been dropped in s*<em>hoppingCart1</em>*, and then I can drag and drop the products in <strong>shoppingCart1</strong> to <strong>other shopping cart container</strong>.But it seems that when I drag and drop the products inside of its own, it also <strong>append</strong> the products. I mean when I drag the <strong>shoppingCart1's product</strong> and drop in <strong>shoppingCart1</strong> itself,it appended to <strong>shoppingCart1</strong>,too. </p>
  
  <p>Thank you very much!</p>
  
  <p>part of my code re-write from JQuery UI Droppable :shopping cart exmaple![ doesn't work as my want ]</p>
  
  <pre><code>    this.igtoMDMovieList = $('&lt;div /&gt;',{'class':'igtoMDMovieList'})
                              .appendTo(this.igtoMDMovieListWrapper);
  
  
          this.igtoMDMovieListOL = $('&lt;ol /&gt;',{'class':'igtoMDMovieListOL'})
                                      .html('&lt;li class="placeholder"&gt;Add your items here&lt;/li&gt;')
                                      .appendTo(this.igtoMDMovieList)
                                      .droppable({
                                          accept:'li', 
                                          drop: function( event, ui ) {
  
                                              $( "&lt;li&gt;&lt;/li&gt;" )
                                                  .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" );
                                          }
                                      });
  </code></pre>