jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）

时间：2022-05-14 23:14:11

现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。

话不多说 ，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js

先上html代码，很简单：

<!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();

    });

这是我发现的比较实用的一个拖动排序，还是比较方便的。

相关文章