针对后台列表table拖拽比较实用的jquery拖动排序

Posted 山涧清泉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了针对后台列表table拖拽比较实用的jquery拖动排序相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jqueryUI拖动</title>
</head>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<style>
 tr{cursor: pointer;}
</style>
<body>
<table id="sort">
 <thead>
 <tr>
  <th class="index">序号</th>
  <th>年份</th>
  <th>标题</th>
  <th>作者</th>
 </tr>
 </thead>
 <tbody>
  <tr>
   <td class="index">1</td>
   <td>2014</td>
   <td>这是第1个</td>
   <td>阿斯蒂芬阿斯蒂芬</td>
  </tr>
  <tr>
   <td class="index">2</td>
   <td>2015</td>
   <td>这是第2个</td>
   <td>阿萨德发射点发岁的</td>
  </tr>
  <tr>
   <td class="index">3</td>
   <td>2016</td>
   <td>这是第3个</td>
   <td>阿萨德发送地方</td>
  </tr>
  <tr>
   <td class="index">4</td>
   <td>2017</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();
});

以上是关于针对后台列表table拖拽比较实用的jquery拖动排序的主要内容,如果未能解决你的问题,请参考以下文章

jQuery拖拽插件制作拖拽排序特效

element+sortablejs插件实现拖拽排序效果

如何使用jQuery Draggable和Droppable实现拖拽功能

Java 后台接口实现同级拖拽排序代码示例

列表拖拽排序功能

数据库关于拖拽排序功能的字段设计和逻辑