正文
jquery列表拖动排序 js列表拖动排序
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
使用jQuery实现列表排序功能
jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）
现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。
话不多说 ，我在网上找了一些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();
});
这是我发现的比较实用的一个拖动排序，还是比较方便的。
相关问答
Q1: jquery 拖动排序并显示序号
。。。他的描述没有写上序号。这个其实很简单。拖动完成重新刷新下序号就行了。
Q2: 如何用Jquery实现多选后拖拽再排序，列表数据
jquery ui sortable没有这种能力，只能自己多加点代码就进行排序了。。比如，你定义一个数组，把多选的东西都放在数组里，然后进行排序。。不过具体怎么排，就看你的业务需求了。
关于jquery列表拖动排序和js列表拖动排序的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
