jquery-ui的sortable插件使用示例

               

首先把这三个资源下载下来：

<link href="/css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" /><script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script><script src="/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>

然后页面初始化的时候，调用这个js方法：

$( "#sortable" ).sortable();

如果希望把序列的值返回给后台的话，需要把ul元素的id写成key_value的形式，实例如下：

<ul id="sortable" style="float:none;">    #foreach($bean in $!{attr.abtEntryMap.keySet()})              <li class="ui-state-default" id="sortable_$!bean"><span>$!bean</span></li>    #end</ul></span>

这样的话，这个插件进行序列化操作的时候会把id序列化成名值对发给后台。

回调函数定义如下：

//上传新的序列     $("#sortable").sortable({      delay : 1,      stop : function(){       $.post(        "/abt/sort.action",        {keyList : $("#sortable").sortable('serialize')},        function(response){        }       );      }     });</span>