实现table中tr、td的可移动效果

最新推荐文章于 2021-11-09 10:36:49 发布

大叔说码

最新推荐文章于 2021-11-09 10:36:49 发布

阅读量3.7k

点赞数

分类专栏： JS+JQuery 文章标签： juqery-ui table tr td 移动

本文链接：https://blog.csdn.net/CNYYGJ/article/details/74977964

版权

JS+JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先上代码：

<!DOCTYPE html>
<!-- saved from url=(0046)http://www.testbj.com/admin.php/admin/category -->
<html style="min-height: 875px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <body class="skin-blue  pace-done" style="min-height: 875px;">
                    
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-body">
                <table class="table table-striped table-bordered mt24">
                    <caption></caption>
                    <thead>
                        <tr>
                            <th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">分类</th>
                            <th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">0</th>
                            <th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">1</th>
                            <th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">2</th>
                            <th rowspan="$rowspan" style="vertical-align: middle;text-align: center;">3</th>
                        </tr>
                    </thead>
                    <tbody class="tcontent ui-sortable">
                        <tr class="rcontent" name="11" value="2" type="0">
                            <td rowspan="$rowspan" class="update tdsort0" name="2" style="vertical-align: middle;text-align: center;"><div>
                            分类一</div></td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="2" name="6" value="10" style="vertical-align: middle;text-align: center;"><div>张三1</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="2" name="4" value="9" style="vertical-align: middle;text-align: center;"><div>李四1</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="2" name="5" value="8" style="vertical-align: middle;text-align: center;"><div>王五1</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="2" name="9" value="7" style="vertical-align: middle;text-align: center;"><div>赵六1</div>
                            </td>
                        </tr>
                        <tr class="rcontent" name="10" value="14" type="0">
                            <td rowspan="$rowspan" class="update tdsort0" name="14" style="vertical-align: middle;text-align: center;"><div>
                            分类二</div>
                            </td>
                             <td rowspan="$rowspan" class="update tdsort1" attr="14" name="16" value="11" style="vertical-align: middle;text-align: center;"><div>张三2</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="14" name="17" value="10" style="vertical-align: middle;text-align: center;"><div>李四2</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="14" name="18" value="9" style="vertical-align: middle;text-align: center;"><div>王五2</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="14" name="19" value="8" style="vertical-align: middle;text-align: center;"><div>赵六2</div>
                            </td>
                            
                        </tr>
                        <tr class="rcontent" name="9" value="27" type="0">
                            <td rowspan="$rowspan" class="update tdsort0" name="27" style="vertical-align: middle;text-align: center;"><div>
                            分类三</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="27" name="29" value="9" style="vertical-align: middle;text-align: center;"><div>张三3</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="27" name="30" value="8" style="vertical-align: middle;text-align: center;"><div>李四3</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="27" name="31" value="7" style="vertical-align: middle;text-align: center;"><div>王五3</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="27" name="32" value="6" style="vertical-align: middle;text-align: center;"><div>赵六3</div>
                            </td>
                        </tr>
                        <tr class="rcontent" name="8" value="38" type="0">
                            <td rowspan="$rowspan" class="update tdsort0" name="38" style="vertical-align: middle;text-align: center;"><div>
                            分类四</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="38" name="40" value="7" style="vertical-align: middle;text-align: center;"><div>张三4</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="38" name="41" value="6" style="vertical-align: middle;text-align: center;"><div>李四4</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="38" name="42" value="5" style="vertical-align: middle;text-align: center;"><div>王五4</div>
                            </td>
                            <td rowspan="$rowspan" class="update tdsort1" attr="38" name="43" value="4" style="vertical-align: middle;text-align: center;"><div>赵六4</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- jQuery 2.0.2 -->
<script src="./jquery.min.js" type="text/javascript"></script>
<!-- jQuery UI 1.10.3 -->
<script src="./jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {

    $('.tdsort1').mousedown(function(event) {
        $(this).parent().sortable({cancel:function() {
        }});

        $('.rcontent').sortable({
            axis   : 'x',
            items: "td", //只是tr可以拖动
            revert : true,
            update : function(event, ui) {
                // ==== 一系列操作 ====
                // alert('移动成功！');
                // window.location.reload();
            }
        })
    })

    $('.tdsort1').mouseup(function() {
        $(".tcontent").sortable("enable");
    })

    $(".tcontent").sortable({
        cursor: "move",
        items: "tr", //只是tr可以拖动
        opacity: 0.6, //拖动时，透明度为0.6
        revert: true, //释放时，增加动画
        update: function(event, ui) { //更新排序之后
            // ==== 一系列操作 ====
            // alert('移动成功！');
            // window.location.reload();
        }
    });
    $(".tcontent").disableSelection();
})

</script>
</body></html>

没什么样式，将就着看，知道原理就好

该效果主要是使用jQueryUI这个插件来实现的，那必须的，你需要先下载<script src="./jquery-ui-1.10.3.min.js" type="text/javascript"></script>这个东西

具体的实现看上面js代码

测试过的朋友可能会有这样的疑问：

你这个不行啊，一旦移动td后，tr就移动不了了

我们看会代码，tr的移动和td的移动是两个动作，没完成一个动作，我们需要恢复动作触发前的状态，这样，下个动作的操作就不会受上一个动作的影响

所以答案是，当我们触发一个动作，完成一系列操作后，然后给页面刷新一下，这样，我们触发下一个动作是完全不会被影响的

我们做这个移动效果，说白了就是想换个方式进行排序，这样就行了