vuedraggable实现table表格行拖动排序效果代码-html代码-BFW代码库

vuedraggable实现table表格行拖动排序效果代码

代码语言：html

所属分类：拖放

代码描述：vuedraggable实现table表格行拖动排序效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue.draggable 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 type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Sortable-1-8-4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vuedraggable.umd.2.20.0.js"></script>
    <style >
        /*定义要拖拽元素的样式*/
        table.demo {
            color: #333333;
            border: #ddd solid 1px;
            border-collapse: collapse;
        }

            table.demo th {
                border: #ddd solid 1px;
                padding: 8px;
                background-color: #dedede;
            }

            table.demo td {
                border: #ddd solid 1px;
                padding: 8px;
                background-color: #ffffff;
            }

            table.demo tr {
                cursor: pointer;
            }

            table.demo td.move:hover {
                cursor: move;
            }
    </style>
</head>
<body style="padding:10px;">
    <div id="app">
        <!--使用draggable组件-->
        <div>点击第一列数字进行拖动，其他列拖拽无效</div>
        <table class="demo">
            <t.........完整代码请登录后点击上方下载按钮下载查看