Question

我有3个元素。当我尝试将一个元素从一个div拖放到另一个div时，我正在克隆该特定元素。我面临的问题是当我拖动该元素并放入其他div时，然后第一个div元素自动转移到最后位置。这是我在codepen中的代码。请看看。

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

 (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);

CSS：

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

http://codepen.io/anon/pen/JKLzBK

Jquery在最后位置可排序丢弃元素

0 个答案: