Question

我有一个我正在使用的可排序列表，可以通过jquery添加和删除另一个脚本的元素，并且有一个奇怪的问题。这些新生成的项目似乎是可拖动的，但它们实际上并没有排序，除非我在页面加载时已将它们放在那里。我尝试过使用sortable（'refresh'），但似乎没有效果。

Answer 1

为了让你有机会关闭这个问题，并且仅仅为了参考，以防万一其他人偶然发现这一点，这似乎在最新的jquery-ui中工作正常。这是一个jsfiddle：http://jsfiddle.net/fordlover49/mVrGA/

Answer 2

我有类似的问题。一旦我将一个新元素添加到可排序列表中，就不再有任何可拖动的东西了。我的解决方案是调用destroy方法：

$( ".selector" ).sortable( "destroy" );

首先然后让它再次排序。

Answer 3

在添加元素之前，我必须调用destroy，然后重新初始化（通过将功能移至设置中）。看来这是一个jQuery问题，可能可以通过在jQuery UI中尝试捕获来解决。

这是

哪个是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.

请注意，我有可排序的列表以及列表项。只有列表项证明了调用refresh会出现问题，并产生一个错误，指出必须将sortable添加到项目中。

我想有另一种解决方法，尽管YMMV是将选择器传递给可排序的init并在绑定之前尝试使用新的DOM。假设您每次启动dragStart时jQuery UI都评估connectWith选项，这是可以接受的，但是我真的只是想要一个快速的解决方案，然后销毁然后对所有项目进行初始化。

Answer 4

取消选中复选框时，您将不会拖放项目，否则在您可以拖放复选框之后需要选中复选框。何时取消选中复选框，我们需要刷新可排序项目的位置。

$(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 ui sortable（'refresh'）无效！

4 个答案: