Jquery可排序删除最后位置的元素

我有三个要素。当我试图将一个元素从一个div拖放到另一个div时，我正在克隆那个特定的元素。这里我面临的问题是，当我拖动该元素并放入另一个div时，第一个div元素会自动移动到最后一个位置。 这是我的代码笔代码。请看一看

<h2>In this snippet the right column does not append the numeric items from     left column</h2>
<ul id="list1">
<li>One</li>
<li class="number">2</li>
<li class="number">3</li>
</ul>
<ul id="list2">
<li>Four</li>
<li>Five</li>
<li>Six</li>

CSS:

---

是的。。这是因为您有

ui.item.clone（）.appendTo（'#list1'）在您的函数中用于
停止
 (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);

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