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

转载

IT祖师爷 2021-08-18 00:49:42

文章标签 jquery html 拖拽 文章分类 jQuery 前端开发

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

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

先上html代码，很简单：

jquery拖拽排序，针对后台列表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();
    });

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

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

话不多说，我在网上找了一些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();
    });