我有一个排序列表，我与工作可以通过jQuery的添加和删除另一个脚本元素时遇到一个奇怪的问题。这些新生成的项目出现为可拖动，但它们实际上并不排序，除非我在页面加载有他们已经在那里。我一直在使用排序（“刷新”）尝试过，但似乎没有任何效果。
为了让您有机会来关闭这个问题，只是在碰到这个情况下，任何人都跌倒参考，这似乎是在最新的jQuery UI的做工精细。这里是一个的jsfiddle：http://jsfiddle.net/fordlover49/mVrGA/
我有一个类似的问题。有一次，我增加了一个新元素排序列表什么也没有可拖动了。我的解决办法是调用destroy方法：
$( ".selector" ).sortable( "destroy" );
第一，然后作出它再次排序。
我不得不打电话添加元素之前破坏，然后重新初始化（通过移动到一个功能的菜单）。看来这是一个jQuery的问题，也许可以用jQuery UI的一个尝试捕捉周围的工作。
这与
这是最新的jQuery和jQuery UI上CodePen可用。这是高级别上下的代码。
$('.list-items').sortable("destroy"); // note the destroy before adding
$('.list-all:last-of-type').after( newItemDOM() );
$('.board').width( (300*(numLists()+1))+20 );
$('.board').sortable("refresh");
setupItemSort(jQuery); // where I initialize my item sorting with options.
请注意，我有排序列表，以及列表项。这是唯一的列表项被证明有问题打电话刷新，产生一个错误说排序不得不被添加到项目。
我想工作围绕的另一种方式，但情况因人而异将是一个选择的排序INIT通过，并结合之前只有新的DOM尝试。假设jQuery UI的评估connectWith选项您发起的dragstart这是可以接受的任何时候，但我真的只是想要一个快速解决方案，并销毁，然后初始化所有项目工作。
当取消选中复选框，你会不会拖放项目，否则你将需要检查的复选框后，你可以拖放复选框。在那个时候，将取消复选框，我们需要刷新排序项的位置。
$(function() {
$(document).find("#sortable").sortable({
cancel: ".unsortable"
});
$(document).find("#sortable").disableSelection();
$( "#sortable" ).on( "sortstart", function( event, ui ) {
$("#response").empty();
$(document).find( "#sortable").sortable("refresh");
jQuery(this).sortable("refreshPositions").children();
$("#sortable").sortable("toArray").map(function(item,index){
var text="Position:"+index+"- "+item+"<br/>";
$("#response").append(text);
})
});
$(document).on("change","input[type='checkbox']",function(event) {
var id=$(this).closest('li').attr('id');
if($(this).is(":checked"))
{
console.log("console log ",id);
$(document).find("#"+id).removeClass('unsortable');
$(document).find( "#sortable" ).trigger( "sortstart");
}
else
{
var clone = $(document).find('li#'+id).html();
$(document).find("li#"+id).remove();
var li=$("<li/>");
li.attr("class","ui-state-default");
li.attr("id",id);
li.append(clone);
$("#sortable").append(li);
$(document).find("#"+id).addClass('unsortable');
$(document).find("input[name='"+id+"']").prop('checked',false);
$(document).find( "#sortable" ).trigger( "sortstart");
$(document).find("#sortable").sortable({
cancel: ".unsortable"
});
}
});
});.ui-draggable, .ui-droppable {
background-position: top;
}
li{
cursor: move;
}
.unsortable{
cursor: no-drop;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<ul id="sortable" class="list-group">
<li class="ui-state-default" id="item-1"><input type="checkbox" name="item-1" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default" id="item-2"><input type="checkbox" name="item-2" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default" id="item-3"><input type="checkbox" name="item-3" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default" id="item-4"><input type="checkbox" name="item-4" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default" id="item-5"><input type="checkbox" name="item-5" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default" id="item-6"><input type="checkbox" name="item-6" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default" id="item-7"><input type="checkbox" name="item-7" checked><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>