Vue——使用vuedraggable实现拖拽

Vue.Draggable使用文档总结地址：https://juejin.cn/post/6844904150350692366

vuedraggable拖拽

第一步：安装vuedraggable依赖

npm i vuedraggable

第二步：在需要的组件中引入vuedraggable

import draggable from "vuedraggable";

第三步：注册组件

components: {
  draggable
}

<template>
  <div>
    <draggable group="A" :list="expApplications" handle=".mover">
      <div
        class="white lighten-2 my-6 px-4 d-flex flex-column"
        style="width: 100%; margin: 0 auto"
        v-for="item in expApplications"
        :key="item.name"
      >
        <div
          class="d-inline-flex flex-row align-center justify-space-between"
          style="border-bottom: 1px dotted grey; line-height: 48px"
        >
          <div class="text-h6">
            <v-btn icon class="mover">
              <v-icon>mdi-format-line-spacing</v-icon>
            </v-btn>
            {{ item.name || "门户站点" }}
          </div>
          <div class="text-h6">
            <v-btn class="my-1" color="success" @click="addSonSite"
              >新增子站点</v-btn
            >
            <v-btn
              class="mx-4 my-1"
              color="success"
              @click="editGroupSite(item)"
              >编辑</v-btn
            >
            <v-btn class="my-1" color="success" @click="deleteGroupSite(item)"
              >删除</v-btn
            >
          </div>
        </div>
        <draggable group="B" :list="item.links" handle=".mover">
          <div class="white" v-for="itm in item.links" :key="itm.id">
            <div
              class="text-caption d-flex flex-row align-center justify-space-between pl-2"
              style="
                    border-bottom: 1px solid #bdbdbd;
                    height: 48px;
                    line-height: 48px;
                  "
            >
              <div class="black--text">
                <v-btn icon class="mover">
                  <v-icon>mdi-menu</v-icon>
                </v-btn>

                {{ itm.name }}
              </div>
              <div>
                <div class="text-h6">
                  <v-btn
                    class="mx-4 my-1"
                    color="cyan"
                    @click="editSonSite(itm)"
                    >编辑</v-btn
                  >
                  <v-btn class="my-1" color="cyan" @click="deleteSonSite(itm)"
                    >删除</v-btn
                  >
                </div>
              </div>
            </div>
          </div>
        </draggable>
      </div>
    </draggable>

    <Component :is="sheet_editor" :type="type" />
  </div>
</template>

<script>
import draggable from "vuedraggable";
import { api_request } from "@/util/network";
import bus from "@/util/eventBus";

import GroupSiteEditor from "@/views/application/compEditor/GroupSite";
import SonSiteEditor from "@/views/application/compEditor/SonSite";

const EDITORS = {
  GROUPSITE: GroupSiteEditor,
  SONSITE: SonSiteEditor
};

export default {
  name: "SiteManage",
  props: ["allDatas"],
  data() {
    return {
      sheet_editor: null,
      drawer: false,
      type: null,
      expApplications: [
        {
          name: "group_1",
          id: 1,
          links: [
            {
              name: "site1",
              id: 1
            },
            {
              name: "site2",
              id: 2
            }
          ]
        },
        {
          name: "group_2",
          order: 2,
          links: [
            {
              name: "site11",
              order: 1
            },
            {
              name: "site22",
              id: 2
            }
          ]
        }
      ]
    };
  },
  created() {
  },
  methods: {
    // 保存排序
    saveSort() {
    console.log("保存排序");
    },
    // 新增组站点
    addGroupSite(item) {
      console.log("新增组", item);
    },
    // 编辑组站点
    editGroupSite(item) {
      console.log("编辑组站点", item);
      this.type = "edit";
    },
    // 删除组站点
    deleteGroupSite(item) {
      console.log("删除组站点", item);
    },
    // 新增子站点
    addSonSite() {
      console.log("新增子站点");
    },
    // 编辑组站点
    editSonSite(itm) {
      console.log("编辑组站点", itm);
    },
    // 删除子站点
    deleteSonSite(itm) {
      console.log("删除子站点", itm);
    }
  },
  components: {
    draggable,
    GroupSiteEditor,
    SonSiteEditor
  }
};
</script>