js拖动排序

最新推荐文章于 2024-04-17 11:17:35 发布

书读百遍其义自见

最新推荐文章于 2024-04-17 11:17:35 发布

阅读量580

点赞数

分类专栏：前端 #js

本文链接：https://blog.csdn.net/qq_32495261/article/details/103731145

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

#js

5 篇文章 0 订阅

订阅专栏

js进行tr标签的拖动排序（使用jQuery UI）

接到需求说要对上传后的文件列表进行排序，刚开始觉得挺难的，问过前端工程师后甩了我这个范例。
通过以下代码，我们可以发现是对你要排序的上一级标签的id调用sortable方法即可，当然我们在本地调试的时候要替换引入的js文件（百度即可下载js文件）
1.以下为拖动排序的js代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 排序（Sortable） - 默认功能</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
  </script>
</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
 
 
</body>
</html>

上述测试代码在线运行链接
关于拖动后的排序回调方法，我使用了官方api的方法有点问题，不知是不是我找错了，在下面贴出正确的排序后回调方法

$( ".selector" ).sortable({
  update: function( event, ui ) {}
});

书读百遍其义自见

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js拖动排序

js进行tr标签的拖动排序（使用jQuery UI）接到需求说要对上传后的文件列表进行排序，刚开始觉得挺难的，问过前端工程师后甩了我这个范例。通过以下代码，我们可以发现是对你要排序的上一级标签的id调用sortable方法即可，当然我们在本地调试的时候要替换引入的js文件（百度即可下载js文件）1.以下为拖动排序的js代码<!doctype html><html lan...
复制链接

扫一扫

专栏目录