在web開發(fā)中，拖拽排序是一種常見的交互方式，jQuery提供了一個(gè)插件——dragsort，可以幫助我們方便地實(shí)現(xiàn)拖拽排序的功能。

但是，有時(shí)候我們?cè)谑褂胐ragsort的過程中會(huì)遇到一些問題。比如說，當(dāng)我們使用ajax將拖拽后的順序信息發(fā)送給后臺(tái)時(shí)，順序信息并不是按照我們期望的順序進(jìn)行傳遞。

$('.list').dragsort({
itemSelector: 'li',
dragSelector: 'li',
dragBetween: true,
dragEnd: function() {
var order = $('.list').find('li').map(function() {
return $(this).data('id');
}).get();
$.ajax({
type: 'POST',
url: 'updateOrder.php',
data: { order: order },
success: function(response) {
console.log(response);
}
});
}
});

我們可以看到，在dragEnd事件中，我們獲取了所有l(wèi)i元素的data-id屬性，并將其按照順序存儲(chǔ)到了一個(gè)數(shù)組中。然后，我們使用ajax將這個(gè)數(shù)組發(fā)送給后臺(tái)。但是，這個(gè)順序并不是按照我們拖拽的順序進(jìn)行排序的。

這是因?yàn)閐ragsort內(nèi)部使用了jQuery的detach方法，該方法會(huì)將元素從DOM中移除，然后再重新添加到新的位置。而在這個(gè)過程中，每個(gè)元素的順序被重新排序了。

為了解決這個(gè)問題，我們可以使用jQuery的data方法，在每個(gè)li元素中保存一個(gè)新的順序?qū)傩浴Ｈ缦滤荆?/p>

$('.list').dragsort({
itemSelector: 'li',
dragSelector: 'li',
dragBetween: true,
dragEnd: function() {
$('.list li').each(function(index) {
$(this).data('order', index);
});
var order = $('.list').find('li').map(function() {
return $(this).data('id') + ':' + $(this).data('order');
}).get();
$.ajax({
type: 'POST',
url: 'updateOrder.php',
data: { order: order },
success: function(response) {
console.log(response);
}
});
}
});

我們?cè)赿ragEnd事件中遍歷每個(gè)li元素，為每個(gè)元素添加一個(gè)新的順序?qū)傩浴Ｈ缓笪覀儗d和順序信息以冒號(hào)分割的形式存儲(chǔ)到一個(gè)數(shù)組中。這樣，即使在dragsort的過程中，每個(gè)元素的順序都會(huì)被正確地保存下來。