jQuery UI после перетаскивания не работает сортируемый

Question

После перетаскивания элемента «DRAG и 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>