sortable.js对table表格进行拖动排序

比如我们有一个文章列表,我们可以设置文章排序字段数字大小然后ajax刷选数据进行排序,这种方法比较简单但是用户体验不好,本章节将通过sortable.js对表格进行排序实现更好的用户体验。

引入sortable.js

<script src="http://www.itxst.com/package/sortable/sortable.min.js"></script>

代码实现

注意每个tr标签需要tbody包裹起来才能有效果。

<table id="itxst">
    <tbody data-id="1">
        <tr>
            <td>1</td>
            <td>www.baidu.com</td>
        </tr>
    </tbody>
    <tbody data-id="2">
        <tr>
            <td>2</td>
            <td>www.itxst.com</td>
        </tr>
    </tbody>
    <tbody data-id="3">
        <tr>
            <td>3</td>
            <td>www.google.com</td>
        </tr>
    </tbody>
    <tbody data-id="4">
        <tr>
            <td>4</td>
            <td>www.microsoft.com</td>
        </tr>
    </tbody>
</table>
<script>
    //获取对象
    var el = document.getElementById('itxst');
    //设置配置
    var ops = {
        animation: 1000,
        //拖动结束
        onEnd: function (evt) {
            console.log(evt);
            //获取拖动后的排序
            var arr = sortable.toArray();
            alert(JSON.stringify(arr));
        }
    };
    //初始化
    var sortable = Sortable.create(el, ops);
</script>

在线试一试

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>sortable.js table表格拖拽例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="http://www.itxst.com/package/sortable/sortable.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
            width: 90%;
        }


            table td, table th {
                border: 1px solid #cad9ea;
                color: #666;
                height: 30px;
            }


            table thead th {
                background-color: #CCE8EB;
            }


            table tr:nth-child(odd) {
                background: #fff;
            }


            table tr:nth-child(even) {
                background: #F5FAFA;
            }
    </style>
</head>
<body>
<table id="itxst">
    <tbody data-id="1">
        <tr>
            <td>1</td>
            <td>www.baidu.com</td>
        </tr>
    </tbody>
    <tbody data-id="2">
        <tr>
            <td>2</td>
            <td>www.itxst.com</td>
        </tr>
    </tbody>
    <tbody data-id="3">
        <tr>
            <td>3</td>
            <td>www.google.com</td>
        </tr>
    </tbody>
    <tbody data-id="4">
        <tr>
            <td>4</td>
            <td>www.microsoft.com</td>
        </tr>
    </tbody>
</table>
<script>
    //获取对象
    var el = document.getElementById('itxst');
    //设置配置
    var ops = {
        animation: 1000,
        //拖动结束
        onEnd: function (evt) {
            console.log(evt);
            //获取拖动后的排序
            var arr = sortable.toArray();
            alert(JSON.stringify(arr));
        }
    };
    //初始化
    var sortable = Sortable.create(el, ops);
</script>
</body>
</html>