jQuery UI可排序：确定项目的顺序 [英] jQuery UI sortable: determining in what order the items are
问题描述
此处是JavaScript的一个有趣用法：使用拖放对项目进行重新排序。在我的页面实现本身工作正常，但有没有办法确定用户放置项目的顺序？
我问，因为我想加载和将项目顺序保存在cookie中。
UPDATED 2012
获取元素的索引位置尝试读取此内容：
COOKIE jquery插件：
< blockquote>
JQUERY：
$（function（）{
// coockie name
var LI_POSITION ='li_position';
$（'ul＃sortable'）。sortable（{
//观察更新事件...
update：function（event，ui）{
// creat e保存仓位的数组...
var order = [];
//循环trought每一个元素...
$（'＃sortable li'）。each（function（e）{
//将每个元素添加到数组中...
// +1使它从1开始而不是0
order.push（$（this）.attr（'id'）+'='+（$（this ）.index（）+ 1））;
}）;
//作为单个变量加入数组...
var positions = order.join（';'）
//根据需要使用变量！
alert（职位）;
// $ .cookie（LI_POSITION，positions，{expires：10}）;
}
}）;
}）;
HTML：
< ul id =sortable>
< li id =id_1>第1项< / li>
< li id =id_2>第2项< / li>
< li id =id_3>第3项< / li>
< li id =id_4>第4项< / li>
< li id =id_5>第5项< / li>
< / ul>
PHP：
这只是一个例子，但你有这样的想法：你可能需要使用数据库，并使用AJAX来获取lis：
//检查是否设置了cookie ..
if（isset（$ _COOKIE ['li_position']））{
//通过 ;...
$ lis = explode（';'，$ _COOKIE ['li_position']）;
//为每个id _＃=＃循环...
foreach（$ lis as $ key => $ val）{
//分解每个由= ...
$ pos = explode（'='，$ val）;
//将结果格式化为li ...
$ li。='< li id ='。$ pos [0]。'>'。$ pos [1]。' < /立GT;';
}
//显示
echo $ li;
//使用它来删除cookie！
// setcookie（'li_position'，null）;
} else {
//不可用cookie显示lis的默认设置
echo'
< li id =id_1>富士< / li>
< li id =id_2>金色< / li>
< li id =id_3> Gala< / li>
< li id =id_4>威廉< / li>
< li id =id_5>乔丹< / li>
';
}
？>
Here is 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?
I'm asking because I want to load and save the item order in a cookie.
UPDATED 2012
get the index position of the elements try to read this:
COOKIE plugin for 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:
<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:
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:
<?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>
';
}
?>
这篇关于jQuery UI可排序：确定项目的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
