vue3+vuedraggable实现table表格列和行拖拽效果代码-html代码-BFW代码库

vue3+vuedraggable实现table表格列和行拖拽效果代码

代码语言：html

所属分类：拖放

代码描述：vue3+vuedraggable实现table表格列和行拖拽效果代码，表格行数据可自由拖动，列也可以拖动。

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>vue.draggable.next 表格例子</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/vue3.2.22.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.vue3.js"></script>
</head>

<body style="padding:10px;">
    <div id="app">
        <drag-component></drag-component>
    </div>
    <script type="x-template" id="drag">
        <div class="title">鼠标放到ID列和行上试试 可以拖拽行和列</div>
        <table class="tb">
            <thead>
              <draggable
                v-model="headers"
                animation="200"
                tag="tr"
                :item-key="(key) => key"
              >
                <template #item="{ element: header }">
                  <th class="move">
                    {{ header }}
                  </th>
                </template>
              </draggable>
            </thead>
            <draggable
              :list="list"
              handle=".move"
              animation="300"
              @start="onStart"
              @end="onEnd"
              tag="tbody"
              item-key="name"
            >
              <template #item="{ element }">
                <tr>
                  <td
                    class="move"
                    v-for="(header, index) in headers"
                    :key="header"
                  >
                    {{ element[header] }}
                  </td>
                </tr>
              </template>
            </draggable>
          </table>
    </script>
    <script>
        const app = {
            //注册draggable组件
            componen.........完整代码请登录后点击上方下载按钮下载查看