Question

拖动元素＆＃34; DRAG和SORT＆＃34;在底部，我失去了对此元素中的列表进行排序的能力。我希望能够在可排序列表中对X和H的元素（在框中）进行排序。

代码：

＆＃13;

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

＆＃13;

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}

＆＃13;

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

＆＃13;

jsFiddle

提前感谢您的帮助

Answer 1

您需要使新（克隆）元素可排序。您可以通过调用draggable的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>

draggable后的jQuery UI无法排序

1 个答案: