vue3move

提供 v-drag 和 v-drop 分别表示可以拖元素和可以放置容器

在 :dragOption 和 :dropOption 提供对应指令的参数

安装

import { createApp } from "vue";
# 推荐安装 tailwind , 因为用到了一些 className 样式
import "./tailwind.css";
import "./style.css";
import App from "./App.vue";

# 导入指令，后面use注册
import vue3move from "vue3move";

createApp(App).use(vue3move).mount("#app");

指令使用例子

<template>
  <div class="border p-2">
    拖拽起点：
    <div
      class="p-2 m-2 border-2"
      v-for="item in data1"
      :key="item.text"
      v-drag="{
        clone: true,
        createid: true,
        element: item,
        name: 'leftcom',
      }"
    >
      {{ item.text }}
    </div>
  </div>
  <div>
    放置区：
    <div
      class="min-h-72 w-96 border p-2"
      v-drop="{
        children: data2,
        allow: ['leftcom', 'maincom'],
        onAdd: onDropAdd,
        onMove: onDropMove,
      }"
    >
      <div
        v-for="item in data2"
        :key="item.id"
        v-drag="{
          element: item,
          brother: data2,
          name: 'maincom',
        }"
      >
        <input class="border" v-if="item.component == 'input'" />
        <select class="border" v-if="item.component == 'select'">
          <option>选项1</option>
          <option>选项2</option>
        </select>
        <table
          class="border w-full table-fixed"
          v-if="item.component == 'table'"
        >
          <tr v-for="(_, r) in 3">
            <td
              class="h-[32px] border"
              v-for="(_, c) in 2"
              v-drop="{
                limit: 1,
                children: item.children[r * 2 + c],
                allow: ['leftcom', 'maincom'],
                onAdd: onDropAdd,
                onMove: onDropMove,
              }"
            >
              <div
                v-for="child in item.children[r * 2 + c]"
                v-drag="{
                  element: child,
                  brother: item.children[r * 2 + c],
                  name: 'maincom',
                }"
              >
                <input class="border" v-if="child.component == 'input'" />
                <select class="border" v-if="child.component == 'select'">
                  <option>选项1</option>
                  <option>选项2</option>
                </select>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div></div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
interface EleType {
  [key: string]: any;
}

const data1 = reactive([
  {
    component: "input",
    text: "输入框",
  },
  {
    component: "select",
    text: "下拉框",
  },
  {
    component: "table",
    text: "布局容器",
    rows: 3,
    cols: 2,
    children: [],
  },
]);

const data2 = reactive<EleType[]>([]);

function onDropAdd(element, brother, index) {
  if (element.component == "table") {
    element.children = Array.from(Array(element.rows * element.cols), () => []);
  }
}
function onDropMove(element, brother, index) {}
</script>

参数说明

/**
 * v-drag 允许拖动
 * 
 第一种： 左侧控件列表参数
v-drag="{
  clone: true,
  createid: true,
  element: item,
  name: 'leftcom'
}"
 第二种：中间控件更改位置
v-drag="{
  element: ele,
  brother: elementsRef,
  name: 'maincom'
}"
  
 **** v-drop 允许放置
 第一种：中间容器
v-drop="{
  children: elementsRef,
  allow: ['leftcom', 'maincom'],
  onAdd: onDropAdd,
  onMove: onDropMove
}"
第二种：表格布局每格只能放1个
v-drop="{
  limit: 1,
  children: comBrother(r, c),
  allow: ['leftcom', 'maincom'],
  onAdd: onDropAdd,
  onMove: onDropMove
}"
 */