使用jQuery实现列表排序功能

jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）

崇信ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。

话不多说 ，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js

先上html代码，很简单：

!DOCTYPE htmlhtml lang="en"head

meta charset="UTF-8"

titlejqueryUI拖动/title/headscript src="js/jquery-1.11.0.min.js"/scriptscript src="js/jquery-ui.min.js"/scriptstyle

tr{cursor: pointer;}/stylebodytable id="sort"

thead

tr

th class="index"序号/th

th年份/th

th标题/th

th作者/th

/tr

/thead

tbody

tr

td class="index"1/td

td2014/td

td这是第1个/td

td阿斯蒂芬阿斯蒂芬/td

/tr

tr

td class="index"2/td

td2015/td

td这是第2个/td

td阿萨德发射点发岁的/td

/tr

tr

td class="index"3/td

td2016/td

td这是第3个/td

td阿萨德发送地方/td

/tr

tr

td class="index"4/td

td2017/td

td这是第4个/td

td的说法大赛分/td

/tr

/tbody/table/body/html

除了要引入jquery.js 和jqueryUI.js外，还需要如下一段代码：

$(document).ready(function(){        var fixHelperModified = function(e, tr) {                    var $originals = tr.children();                    var $helper = tr.clone();

$helper.children().each(function(index) {

$(this).width($originals.eq(index).width())

});                    return $helper;

},

updateIndex = function(e, ui) {

$('td.index', ui.item.parent()).each(function (i) {

$(this).html(i + 1);

});

};

$("#sort tbody").sortable({

helper: fixHelperModified,

stop: updateIndex

}).disableSelection();

});

这是我发现的比较实用的一个拖动排序，还是比较方便的。

jquery 通过拖动排序

例子没有。关于拖动的jquery插件很多~jquery ui就能实现~

如：

div data-id='1'1/div

div data-id='2'2/div

div data-id='3'3/div

排序后为：

div data-id='2'2/div

div data-id='1'1/div

div data-id='3'3/div

思路就是jquery each()函数获取id，一次写入字符串中（所得为‘2,1,3’），执行ajax请求，将字符串放入数组，key为id，value为序号，所得为：

array(

'2' = '1',

'1' = '2',

'3' = '3'

)

更新数据库即可。

随手打的，不知道对你是否有帮助。

如何用Jquery实现多选后拖拽再排序，列表数据

jquery ui sortable没有这种能力，只能自己多加点代码就进行排序了。。比如，你定义一个数组，把多选的东西都放在数组里，然后进行排序。。不过具体怎么排，就看你的业务需求了。

关于jquery sorttable拖拽排序之后如何保存位置到数据库优化算法

我现在保存的方式是有很大问题的，望高手们能给一个算法优化我的代码

页面上有无限制div行数的数据，比如

name order

a 1

b 2

c 3

d 4

e 5

f 6

1、首先把b拖到a前面，我的做法是当遇到最顶端的数值时把他们的序号1/2=0.5

2、把b拖到c和d之间，做法是把(3+4)/2=3.5

3、把b拖拽到f后面，当遇到最末端的数值时把他们的序号6+1=7

这时候把3种情况name为b的序号值保存进数据库，下次刷新排序之后的结果看起来是没有问题的

但这玩意用久了，也就是说给管理员拖了很多次b的数据之后会不停的上下相加然后相除，虽然序号我定义的是double类型，但已经去到-28E位数，记得到-32E就会超出double的长度。所以我觉得我这样做是绝对只能是用一时的半成品，功能的要求又想实时拖拽，实时保存进数据库，而不想点击按钮来统一保存。

请教朋友们有没有比较好的算法来处理这种问题，有人提出用链表，但我还是理解不得，具体做法