我有jQuery排序表:
<ul id="sortable">
<li class="ui-state-default 1" id="1">Item 1</li>
<li class="ui-state-default 2" id="2">Item 2</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
目前,我可以在视觉上拖动它们来编辑其位置,但是它们的ID-S将保持与重新定位之前的状态一样。
我该如何编辑代码,以至于当一行重新定位时,将根据列表设置整个表的ID-S,而ID-S?
的数量越来越多。更新:序列号可以在ID-S中,也可以在类中。
无需放置类或ID即可跟踪DOM中元素的位置。他们作为列表的子元素的位置是他们的位置。
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
$('button').on('click', function(){
var $listItems = $('#sortable li');
// you can have just an array. The order of the array IS the order
console.log( $listItems.map(function(){ return this.innerHTML}).get() );
// if you want to make it more fancy, you can put the order in the array
console.log(
$listItems.map(function(index, element){
return { index: index, value: element.innerHTML };
}).get()
);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<button>Save</button>