我有一个正在使用的可排序列表，它可以通过 jquery 由另一个脚本添加和删除元素，并且遇到了一个奇怪的问题。这些新生成的项目似乎是可拖动的，但它们实际上并没有排序，除非我在页面加载时已经将它们放在了那里。我试过使用 sortable('refresh')，但似乎没有效果。
【问题讨论】：
标签： jquery-ui jquery-ui-sortable jquery
为了让您有机会结束这个问题，并且仅供参考，以防其他人偶然发现这个问题，这在最新的 jquery-ui 中似乎可以正常工作。这是一个 jsfiddle：http://jsfiddle.net/fordlover49/mVrGA/
【讨论】：
我遇到了类似的问题。一旦我在可排序列表中添加了一个新元素，就再也无法拖动了。我的解决方案是调用destroy 方法：
$( ".selector" ).sortable( "destroy" );
先使其可排序。
【讨论】：
我必须在添加元素之前调用destroy，然后重新初始化（通过将设置移动到函数中）。看来这是一个 jQuery 问题，可以通过 jQuery UI 中的 try catch 来解决。
这是和
哪些是 CodePen 上可用的最新 jQuery 和 jQuery UI。这是高级代码。
$('.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.
请注意，我有可排序的列表以及列表项。只有列表项证明调用刷新时出现问题，生成一个错误，指出必须将可排序添加到项中。
我想另一种解决方法，尽管 YMMV 会将选择器传递给可排序的 init，并在绑定之前尝试使用新的 DOM。假设 jQuery UI 在您启动 dragStart 时评估 connectWith 选项，这是可以接受的，但我真的只是想要一个快速的解决方案，然后销毁，然后对所有项目进行初始化。
【讨论】：
当您取消选中复选框时，您将不会拖放项目，否则您需要在拖放复选框后选中复选框。 什么时候取消选中复选框，我们需要刷新可排序项目的位置。
$(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>【讨论】：