jQuery UI 排序位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2979643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Sortable Position
提问by Jiew Meng
How do I track what position an element is when its position in a sortable list changes?
当元素在可排序列表中的位置发生变化时，如何跟踪该元素的位置？
回答by Nick Craver
You can use the uiobject provided to the events, specifically you want the stopevent, the ui.itempropertyand .index(), like this:
您可以使用ui提供给事件的对象，特别是您想要的stopevent、ui.itemproperty和.index()，如下所示：
$("#sortable").sortable({
stop: function(event, ui) {
alert("New position: " + ui.item.index());
}
});
You can see a working demo here, remember the .index()value is zero-based, so you may want to +1 for display purposes.
您可以在此处查看工作演示，请记住该.index()值是从零开始的，因此您可能希望 +1 用于显示目的。
回答by i_a
I wasn't quite sure where I would store the start position, so I want to elaborate on David Boikes comment. I found that I could store that variable in the ui.item object itself and retrieve it in the stop function as so:
我不太确定我将在哪里存储开始位置，所以我想详细说明 David Boikes 的评论。我发现我可以将该变量存储在 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());
}
});
回答by user3439968
Use updateinstead of stop
使用更新而不是停止
http://api.jqueryui.com/sortable/
http://api.jqueryui.com/sortable/
update( event, ui )
Type: sortupdate
This event is triggered when the user stopped sorting and the DOM position has changed.
更新（事件，用户界面）
类型：排序更新
当用户停止排序并且 DOM 位置发生变化时触发此事件。
.
.
stop( event, ui )
Type: sortstop
This event is triggered when sorting has stopped. event Type: Event
停止（事件，用户界面）
类型：排序停止
当排序停止时触发此事件。事件类型：事件
Piece of code:
一段代码：
<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>
回答by rahim.nagori
As per the official documentation of the jquery sortable UI: http://api.jqueryui.com/sortable/#method-toArray
根据 jquery 可排序 UI 的官方文档：http: //api.jqueryui.com/sortable/#method-toArray
In update event. use:
在更新事件中。用：
var sortedIDs = $( ".selector" ).sortable( "toArray" );
and if you alert or console this var (sortedIDs). You'll get your sequence. Please choose as the "Right Answer" if it is a right one.
如果你警告或控制这个 var (sortedIDs)。你会得到你的序列。 如果正确，请选择“正确答案”。
