富贵资源网 Design By www.hznty.com
现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序。
话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js
先上html代码,很简单:
复制代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title> </head> <script src="/UploadFiles/2021-04-02/jquery-1.11.0.min.js">复制代码
除了要引入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(); });
这是我发现的比较实用的一个拖动排序,还是比较方便的。
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...