JQuery UI сортируемый («обновить») не работает!

Question

У меня есть сортируемый список, с которым я работаю, и элементы которого могут быть добавлены и удалены другим скриптом через jquery, и у меня странная проблема Эти новые сгенерированные элементы выглядят перетаскиваемыми, но на самом деле они не сортируются, если у меня их уже нет при загрузке страницы. Я пытался использовать сортируемую («обновить»), но, похоже, не имеет никакого эффекта.

Answer 1

У меня была похожая проблема. Как только я добавил новый элемент в сортируемый список, ничто больше не могло быть перетаскиваемым. Моим решением было вызвать метод destroy:

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

сначала, а затем снова сделать его сортируемым.

Answer 2

Чтобы дать вам возможность закрыть этот вопрос и просто для справки на тот случай, если кто-нибудь еще наткнется на это, похоже, это работает нормально в последней версии jquery-ui. Вот jsfiddle: http://jsfiddle.net/fordlover49/mVrGA/

Answer 3

Когда вы снимите флажок, вы не будете перетаскивать элемент, в противном случае вам нужно будет установить флажок после того, как вы можете перетащить флажок.когда снимите флажок, нам нужно обновить позицию сортируемого элемента.

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

Answer 4

Мне пришлось вызывать destroy перед добавлением элементов, а затем повторно инициализировать (перейдя в функцию setup). Кажется, это проблема jQuery, и, возможно, ее можно обойти с помощью try catch в пользовательском интерфейсе jQuery.

Это было с

• https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js
• https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js

Какие последние пользовательские интерфейсы jQuery и jQuery доступны в 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.

Обратите внимание, что у меня есть сортируемые списки, а также элементы списка. Только элементы списка оказались проблемой для вызова обновления, что привело к ошибке, при которой к элементам нужно было добавить сортируемую информацию.

Я полагаю, что есть и другой способ обойти, хотя YMMV должен был бы передать селектор в сортируемое init и попробовать только с новым DOM перед связыванием. Предполагая, что пользовательский интерфейс jQuery оценивает параметр connectWith каждый раз, когда вы запускаете dragStart, это было бы приемлемо, но я действительно просто хотел быстрого решения и уничтожения, а затем init для всех элементов.