Javascript jQuery UI 可排序：确定项目的顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2669130/
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: determining in what order the items are
提问by Pieter
Hereis an interesting use of JavaScript: reordering items with drag and drop. The implementation itself in my page works fine, but is there a way to determine in which order the user put the items?
这是 JavaScript 的一个有趣用法：通过拖放重新排序项目。我页面中的实现本身运行良好，但是有没有办法确定用户放置项目的顺序？
I'm asking because I want to load and save the item order in a cookie.
我问是因为我想在 cookie 中加载和保存项目订单。
回答by Luca Filosofi
UPDATED 2012
2012 年更新
get the index position of the elements try to read this:
获取元素的索引位置尝试阅读：
COOKIE plugin for jquery:
jQuery 的 COOKIE 插件：
JQUERY:
查询：
$(function() {
//coockie name
var LI_POSITION = 'li_position';
$('ul#sortable').sortable({
//observe the update event...
update: function(event, ui) {
//create the array that hold the positions...
var order = [];
//loop trought each li...
$('#sortable li').each( function(e) {
//add each li position to the array...
// the +1 is for make it start from 1 instead of 0
order.push( $(this).attr('id') + '=' + ( $(this).index() + 1 ) );
});
// join the array as single variable...
var positions = order.join(';')
//use the variable as you need!
alert( positions );
// $.cookie( LI_POSITION , positions , { expires: 10 });
}
});
});?
HTML:
HTML：
<ul id="sortable">
<li id="id_1"> Item 1 </li>
<li id="id_2"> Item 2 </li>
<li id="id_3"> Item 3 </li>
<li id="id_4"> Item 4 </li>
<li id="id_5"> Item 5 </li>
</ul>
PHP:
PHP：
this is just an example but you got the idea: you may want use a database instead and use AJAX for get back the lis:
这只是一个示例，但您明白了：您可能想要使用数据库并使用 AJAX 取回 lis：
<?php
//check if cookie is set..
if ( isset( $_COOKIE['li_position'] ) ) {
//explode the cockie by ";"...
$lis = explode( ';' , $_COOKIE['li_position'] );
// loop for each "id_#=#" ...
foreach ( $lis as $key => $val ) {
//explode each value found by "="...
$pos = explode( '=' , $val );
//format the result into li...
$li .= '<li id="'.$pos[0].'" >'.$pos[1].'</li>';
}
//display it
echo $li;
// use this for delete the cookie!
// setcookie( 'li_position' , null );
} else {
// no cookie available display default set of lis
echo '
<li id="id_1"> Fuji </li>
<li id="id_2"> Golden </li>
<li id="id_3"> Gala </li>
<li id="id_4"> William </li>
<li id="id_5"> Jordan </li>
';
}
?>
回答by Glennular
回答by Ravi Ram
HTML
HTML
<ul id="sortable">
<li id="id1"> Item 1 </li>
<li id="id2"> Item 2 </li>
<li id="id3"> Item 3 </li>
<li id="id4"> Item 4 </li>
<li id="id5"> Item 5 </li>
</ul>
JQUERY
查询
$("#sortable").sortable(
{
update: function () {
var strItems = "";
$("#sortable").children().each(function (i) {
var li = $(this);
strItems += li.attr("id") + ':' + i + ',';
});
updateSortOrderJS(strItems); <--- do something with this data
}
});
strItems will look like (new-item-order:item-id)
strItems 看起来像 (new-item-order:item-id)
0,49:1,365:2,50:3,364:4,366:5,39:6
0,49:1,365:2,50:3,364:4,366:5,39:6
then you can parse it into an update functions something like
然后你可以把它解析成一个更新函数，比如
List eachTask = new List(itemsList.Trim().Split(new char[] { ',' }));
List eachTask = new List(itemsList.Trim().Split(new char[] { ',' }));
then
然后
String[] item = i.Split(new Char[] { ':' });
String[] item = i.Split(new Char[] { ':' });
回答by TheCarver
This is what I use currently:
这是我目前使用的：
<div id="sortable">
<div id="2000"></div>
<div id="1000"></div>
<div id="3000"></div>
</div>
$('#sortable').sortable({
update: function () { save_new_order() }
});
function save_new_order() {
var a = [];
$('#sortable').children().each(function (i) {
a.push($(this).attr('id') + ':' + i);
});
var s = a.join(',');
alert(s);
}
Alerted value:
警报值：
2000:0,1000:1,3000:2
回答by Manish
I have used following code to get the order of item.
我使用以下代码来获取项目的顺序。
Html
html
<div id="sortable">
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
<div >6</div>
</div>
JQuery
查询
$(document).ready(function(){
$("#sortable").sortable({
stop : function(event, ui){
$('#sortable > div').each(function(){
alert($(this).html());
});
}
});
$("#sortable").disableSelection();
});
