最终效果图
有几个坑这里分享一下。
我用的是cloud-admin，一个bootstrap的CSS模板。
jQuery v2.0.3 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license */jQuery UI - v1.11.1 - 2014-08-24
jquery 的sort 功能是在ui包里面的，所以需要UI包引入
一开始引入页面没效果，新建一个单独的页面正常使用，又放入完整页面又正常了，真不知道什么情况。反复试一下应该是没问题的。
试了以为是 ol 标签有问题，换 ul 好了又换回 ol 一切正常。
1 <div>2 ????????????????????????????????????????????<ol class="dd-list" id="checkList">3 ????????????????????????????????????????????<c:forEach items="${checkList}" var="item">4 ????????????????????????????????????????????????<li id="${item.fieldName}">5 ????????????????????????????????????????????????????<span ?class="btn btn-default">${item.chineseName}</span>6 ????????????????????????????????????????????????</li>7 ????????????????????????????????????????????</c:forEach>8 ????????????????????????????????????????????</ol>9 ????????????????????????????????????????</div>2个候选框，一个是已选择的，另外一个是未选择的，可以互相拖拽，这个地方用到 sortable connectWith属性
$("#uncheckList").sortable({ ???????connectWith:"#checkList" ?}).disableSelection();只提交已选择那个DIV里的项目保存到数据库。
这里的 sortable("toArray") 功能，需要注意一下，出来是个 以 , （逗号） 隔开的字符串，内容就是 li 属性 id 的内容。
而且出来的是按顺序排列的一串。如下图。
id="${item.fieldName}"
但你直接通过ajax post是不行的，需要decodeURIComponent一下才能在服务器端正常获取到。剩下的就没什么问题。很 好用的一个功能。
checklist=decodeURIComponent(checklist,true);
1 <script> 2 var typeId=${param.type}; 3 ??$(function() { 4 ????$("#checkList").sortable({ 5 ??????????connectWith:"#uncheckList", 6 ??????????delay:1, 7 ??????????stop:function(){ 8 ??????????????var checklist=$("#checkList").sortable("toArray"); 9 ??????????????checklist=decodeURIComponent(checklist,true);10 ??????????????$.post("/sequence.json",{value:checklist,type:typeId}); ?11 ??????????}12 ????}).disableSelection();13 ????14 ????$("#uncheckList").sortable({15 ?????????connectWith:"#checkList"16 ????}).disableSelection();17 ??});18 </script> 1 ????@ResponseBody 2 ????@RequestMapping(value="/sequence",method=RequestMethod.POST) 3 ????public Integer updateSequence(HttpServletRequest request, HttpServletResponse response, ModelMap model) { 4 ????????Integer classify = getClassify(request); 5 ????????String value=this.getValue(request, "value"); 6 ????????super.logParam(request); 7 ????????String[] attrs=StringUtils.split(value,","); 8 ????????List<CustomColumn> cclist=new ArrayList<CustomColumn>(); 9 ????????for(int sequence=0,len=attrs.length;sequence<len;sequence++){10 ????????????CustomColumn cc=new CustomColumn();11 ????????????cc.setClassify(classify);12 ????????????cc.setFieldName(attrs[sequence]);13 ????????????cc.setSequence(sequence);14 ????????????cclist.add(cc);15 ????????}16 ????????manager.savePointListCustomColumns(cclist, this.getCompanyId(request),classify);17 ????????return 1;18 ????}完美。
jquery sortable ?提交数据保存 使用问题
原文地址：https://www.cnblogs.com/nanahome/p/9195768.html