可拖动后的jQuery UI无法排序

Question

在底部拖动元素“DRAG and SORT”后，我无法在该元素中对列表进行排序。 我希望能够在可排序列表上的 X 和 H（在框中）的元素之间进行排序。

代码：

 $(function() {
$( "#sortable" ).sortable({
  revert: true,
  handle: "span"
});
 $( ".insort" ).sortable({
  revert: true,
    handle: ".handle"  
}); 
$( ".draggable" ).draggable({
  connectToSortable: "#sortable",
  helper: "clone",
  revert: "invalid",
  handle: "span"
});
$( "ul, li" ).disableSelection();
  });

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
.insort div{border:2px solid red; padding:2px; margin:5px}
span {font-weight:bold; padding:3px;}
b{padding-right:20px}

   

 <link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

   
<ul>
    <li class="draggable ui-state-highlight"><span>X</span> Drag me down</li>
  <li class="draggable ui-state-highlight "><span>X</span> Drag and SORT
      <div class="insort">
          <div><b class="handle">H</b>SORT1</div>
          <div><b class="handle">H</b>SORT2</div> 
          <div><b class="handle">H</b>SORT3</div> 
      </div>
      </li>
</ul>
 <hr>
<ul id="sortable">
  <li class="ui-state-default"><span>X</span>Item 1</li>
  <li class="ui-state-default"><span>X</span>Item 2</li>
  <li class="ui-state-default"><span>X</span>Item 3</li>
  <li class="ui-state-default"><span>X</span>Item 4</li>
  <li class="ui-state-default"><span>X</span>Item 5</li>
</ul>

jsFiddle

提前感谢您的帮助

Answer 1

您需要使新的（克隆的）元素可排序。您可以通过在可拖动对象的stop 事件中调用函数来做到这一点：

$(function() {
    $( "#sortable" ).sortable({
      revert: true,
      handle: "span"
    });
    //make this a function so we can call it later rather than duplicate the code
    function insort(){
        $( ".insort" ).sortable({
            revert: true,
            handle: ".handle"  
        });
    }
    insort();//call immediately

    $( ".draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid",
      handle: "span",
      stop: function() {
           insort();//call our new insort function to make our cloned elements sortable
      }
    });
    $( "ul, li" ).disableSelection();
});

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
.insort div{border:2px solid red; padding:2px; margin:5px}
span {font-weight:bold; padding:3px;}
b{padding-right:20px}

   

 <link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

   
<ul>
    <li class="draggable ui-state-highlight"><span>X</span> Drag me down</li>
  <li class="draggable ui-state-highlight "><span>X</span> Drag and SORT
      <div class="insort">
          <div><b class="handle">H</b>SORT1</div>
          <div><b class="handle">H</b>SORT2</div> 
          <div><b class="handle">H</b>SORT3</div> 
      </div>
      </li>
</ul>
 <hr>
<ul id="sortable">
  <li class="ui-state-default"><span>X</span>Item 1</li>
  <li class="ui-state-default"><span>X</span>Item 2</li>
  <li class="ui-state-default"><span>X</span>Item 3</li>
  <li class="ui-state-default"><span>X</span>Item 4</li>
  <li class="ui-state-default"><span>X</span>Item 5</li>
</ul>