title: Jquery Sortable dropping elements in last position
body: <p>I have 3 elements. When i try to drag n drop one element from one div to another div , i am cloning that particular element. The problem here i am facing is when i drag that element and dropping in other div , then first div element automatically shifting to last position.
  Here is my code in codepen. Please have a look.</p>
  
  <pre><code>&lt;h2&gt;In this snippet the right column does not append the numeric items from     left column&lt;/h2&gt;
  &lt;ul id="list1"&gt;
  &lt;li&gt;One&lt;/li&gt;
  &lt;li class="number"&gt;2&lt;/li&gt;
  &lt;li class="number"&gt;3&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="list2"&gt;
  &lt;li&gt;Four&lt;/li&gt;
  &lt;li&gt;Five&lt;/li&gt;
  &lt;li&gt;Six&lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code> (function($) {
  
  $('#list1').sortable({
    connectWith: '#list2',
    helper:'clone',
    appendTo:'#list2',
    // beforeStop: function(ev, ui){
    //  // ui.item.clone().appendTo('#list2');
    //   //alert(ui.item.index());
    //   ui.item.index().appendTo('#list1');
    // },
    stop:function(ev, ui){
  
      //ui.placeholder.index().appendTo('#list1');
  
     ui.item.clone().appendTo('#list1');
  
  
    },
    change:function(ev, ui){
      ui.placeholder.index().appendTo('#list2');
    }
  });    
  
  $('#list2').sortable({
      connectWith: 'ul',
    placeholder:'ui-sortable-handle',
      receive: function(ev, ui) {
          if(ui.item.hasClass("number"))
            ui.sender.sortable("cancel");
      }
  });    
  })(jQuery);
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>h2 { font-size:1.4em; margin: 20px 10px 0 20px; }
  ul
  {
  float: left;
  margin: 20px 10px 0 20px;
  border:1px solid #999;
  width: 100px;
  padding:10px;
  }
  li
  {
  background: #fff;
  border: solid 1px #ccc;
  font-family: Arial, Tahoma, San-Serif;
  padding: 10px;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/JKLzBK" rel="nofollow">http://codepen.io/anon/pen/JKLzBK</a></p>