[英]jQuery UI sortable: determining in what order the items are
Here is an interesting use of JavaScript: reordering items with drag and drop. 以下是JavaScript的有趣用法:使用拖放重新排序项目。 The implementation itself in my page works fine, but is there a way to determine in which order the user put the items?
我的页面中的实现本身工作正常,但有没有办法确定用户放置项目的顺序?
I'm asking because I want to load and save the item order in a cookie. 我问,因为我想加载并保存cookie中的商品订单。
UPDATED 2012 2012年更新
FULL WORKING DEMO & SOURCE 完整的工作演示和来源
get the index position of the elements try to read this: 获取元素的索引位置尝试阅读:
COOKIE plugin for jquery: 用于jquery的COOKIE插件:
JQUERY: 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>
';
}
?>
使用toArray
方法将可排序项的id序列化为字符串数组。
$( "#sortable" ).sortable('toArray');
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 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:1365:2,50:3,364:4366:5,39:6
then you can parse it into an update functions something like 然后你可以将它解析成更新函数
List eachTask = new List(itemsList.Trim().Split(new char[] { ',' }));
列出eachTask = new List(itemsList.Trim()。Split(new char [] {','}));
then 然后
String[] item = i.Split(new Char[] { ':' });
String [] item = i.Split(new Char [] {':'});
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
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 JQuery的
$(document).ready(function(){
$("#sortable").sortable({
stop : function(event, ui){
$('#sortable > div').each(function(){
alert($(this).html());
});
}
});
$("#sortable").disableSelection();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.