Question

我可以使用动态删除和添加的列表进行可排序的工作吗？我并不是说只是项目是动态的，而是完整的列表本身。

我每次添加列表时都应该运行吗？有没有办法避免这种情况？

$(function() {
    $( "#my_menu_list").sortable({
      stop: completed_sorting,
      items: 'li',
       delay: 150,
       distance: 5,
    }).disableSelection();
});

我见过有关动态添加列表中元素的答案。那不是我的问题。

Answer 1

添加动态列表后，使用以下代码将 sortable 插件应用于动态列表。

$("#my_menu_list").sortable("refresh");

上述方法的目的如下。

刷新可排序的项目。触发重新加载所有可排序项目，从而导致识别新项目。

http://api.jqueryui.com/sortable/#method-refresh

Answer 2

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

使用jQuery Sortable和动态添加列表（不仅仅是动态项）

2 个答案: