现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序。
话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js
先上html代码,很简单:
复制代码
jqueryUI拖动 tr{cursor: pointer;}
序号 年份 标题 作者 1 2014 这是第1个 阿斯蒂芬阿斯蒂芬 2 2015 这是第2个 阿萨德发射点发岁的 3 2016 这是第3个 阿萨德发送地方 4 2017 这是第4个 的说法大赛分
复制代码
除了要引入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();
});
这是我发现的比较实用的一个拖动排序,还是比较方便的。



