可排序位置

当元素在可排序列表中的位置发生变化时，如何跟踪元素的位置？

112472 次浏览
小开
最佳答案

您可以使用提供给事件的 ui对象，特别是您想要的 stop事件、 ui.item属性和 .index()，如下所示:

$("#sortable").sortable({
stop: function(event, ui) {
alert("New position: " + ui.item.index());
}
});

您可以在这里看到一个工作演示 ，记住 .index()值是从零开始的，所以出于显示的目的，您可能需要 + 1。

小开

我不太确定我会在哪里存储起始位置，所以我想详细说明大卫博伊克斯的评论。我发现我可以将这个变量存储在 ui.item 对象本身中，然后在 stop 函数中检索它，如下所示:

$( "#sortable" ).sortable({
start: function(event, ui) {
ui.item.startPos = ui.item.index();
},
stop: function(event, ui) {
console.log("Start position: " + ui.item.startPos);
console.log("New position: " + ui.item.index());
}
});
小开

使用 更新代替 别说了

Http://api.jqueryui.com/sortable/

Update (event，ui)

类型: sortupdate

当用户停止排序和 DOM 时触发此事件 位置变了。

.

Stop (event，ui)

类型: sortstop

当排序已停止时触发此事件

密码:

Http://jsfiddle.net/7a1836ce/

<script type="text/javascript">


var sortable    = new Object();
sortable.s1     = new Array(1, 2, 3, 4, 5);
sortable.s2     = new Array(1, 2, 3, 4, 5);
sortable.s3     = new Array(1, 2, 3, 4, 5);
sortable.s4     = new Array(1, 2, 3, 4, 5);
sortable.s5     = new Array(1, 2, 3, 4, 5);


sortingExample();


function sortingExample()
{
// Init vars


var tDiv    = $('<div></div>');
var tSel    = '';


// ul
for (var tName in sortable)
{


// Creating ul list
tDiv.append(createUl(sortable[tName], tName));
// Add selector id
tSel += '#' + tName + ',';


}


$('body').append('<div id="divArrayInfo"></div>');
$('body').append(tDiv);


// ul sortable params


$(tSel).sortable({connectWith:tSel,
start: function(event, ui)
{
ui.item.startPos = ui.item.index();
},
update: function(event, ui)
{
var a   = ui.item.startPos;
var b   = ui.item.index();
var id = this.id;


// If element moved to another Ul then 'update' will be called twice
// 1st from sender list
// 2nd from receiver list
// Skip call from sender. Just check is element removed or not


if($('#' + id + ' li').length < sortable[id].length)
{
return;
}


if(ui.sender === null)
{
sortArray(a, b, this.id, this.id);
}
else
{
sortArray(a, b, $(ui.sender).attr('id'), this.id);
}


printArrayInfo();


}
}).disableSelection();;


// Add styles


$('<style>')
.attr('type', 'text/css')
.html(' body {background:black; color:white; padding:50px;} .sortableClass { clear:both; display: block; overflow: hidden; list-style-type: none; } .sortableClass li { border: 1px solid grey; float:left; clear:none; padding:20px; }')
.appendTo('head');




printArrayInfo();


}


function printArrayInfo()
{


var tStr = '';


for ( tName in sortable)
{


tStr += tName + ': ';


for(var i=0; i < sortable[tName].length; i++)
{


// console.log(sortable[tName][i]);
tStr += sortable[tName][i] + ', ';


}


tStr += '<br>';


}


$('#divArrayInfo').html(tStr);


}




function createUl(tArray, tId)
{


var tUl = $('<ul>', {id:tId, class:'sortableClass'})


for(var i=0; i < tArray.length; i++)
{


// Create Li element
var tLi = $('<li>' + tArray[i] + '</li>');
tUl.append(tLi);


}


return tUl;
}


function sortArray(a, b, idA, idB)
{
var c;


c = sortable[idA].splice(a, 1);
sortable[idB].splice(b, 0, c);


}
</script>
小开

根据 jquery 可排序 UI 的官方文档: Http://api.jqueryui.com/sortable/#method-toarray

在更新事件中使用:

var sortedIDs = $( ".selector" ).sortable( "toArray" );

如果你警告或者控制这个 var (sortedID) ，你会得到你的序列。 如果答案正确，请选择“正确答案”。


提交答案