jquery ui表格拖拽demo

image.png

该demo是一个上下拖拽table表格单元行tr的效果，根据拖拽方法sortable()参数的不同,可做不同效果，如左右td的拖动等，用的是jqueryUI插件，具体代码以下：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格拖拽-示例</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

    <style>
        /*简单给下样式*/
        table{color:#fff;text-align:center;margin:auto;}
        thead{background-color: #00008B}
        tr{background-color: #999;height:25px;}
        tfoot{text-align: left;}
        tfoot tr{background-color: #008200;}
        h3{text-align: center;}
    </style>
</head>

<body>
    <h3>表格拖拽demo</h3>
    <table id="sortable">
        <thead >
            <tr style="background-color:#0000ff">
                <td  style="width:80px;">ID</td>
                <td style="width:120px;">name</td>
                <td style="width:120px;">age</td>
            </tr>
        </thead>
        <tfoot>
            <tr><td colspan="3">总共三条数据</td></tr>
        </tfoot>
        <tbody>
            <tr><td>1</td><td >老王</td><td >25</td></tr>
            <tr><td>2</td><td>老李</td><td>35</td></tr>
            <tr><td>3</td><td>老张</td><td>45</td>
            </tr>
        </tbody>
    </table>
</body>

<script>
    /*拖拽操作*/
    $("#sortable").sortable({
        cursor: "move",
        axis:"y",               //只在y轴拖动
        items: "tr",            //拖拽对象
        opacity: 0.5,           //拖动时，透明度为0.6
        revert: false,          //释放时，增加动画
        cancel:"tfoot,thead",   //禁止表头和表未拖拽
        update: function(event, ui) {
            //获取拖拽行对象第一个单元格属性
            var first_td = ui.item.find('td:first').html();
            console.log(first_td);

            //拖拽:执行排序操作
            //sorting();
        }
    });
</script>
</html>

该demo简单说明：
1.items属性决定能拖动哪些，不想拖动的页面元素，使用cancel属性控制
2.cancel只是让指定元素对象不可拖拽，但能被其它可拖拽的移动位置，改变标签可解决这个问题，比如拖拽对象是tr,表头用个div来写就不会有这个问题