vue中的拖拽

news2025/5/15 18:22:36

拖拽总结

实现方式	特点	适用场景
HTML5 原生拖拽 API	✅ 直接使用 `dataTransfer` 进行数据传输 ✅ 兼容性好（大部分浏览器支持） ✅ 适合简单的拖拽场景	低代码平台、表单生成器、组件拖拽
Vue/React 组件库（如 Vue Draggable、SortableJS）	✅ 提供更丰富的交互效果 ✅ 支持列表排序、拖拽嵌套 ❌ 依赖额外的库	复杂拖拽，如列表排序、树状结构
CSS 仅视觉拖拽（无交互）	✅ 仅改变视觉位置，无数据交互 ❌ 无法存储拖拽数据	简单 UI 动画

拖拽总结

HTML5 原生拖拽API（Drag and Drop API）

分为：拖拽源和拖拽目标。适用于vue低代码开发。（若要拖拽嵌套或复杂排序，考虑 Vue Draggable（基于 SortableJS））

拖拽源 -> 拖拽开始（dragstart）

设置 dataTransfer.setData() 存储拖拽的数据。

设置 effectAllowed 允许的拖拽行为。

draggable="true"：启用 HTML5 拖拽。

@dragstart 触发 onDragStart()，存储数据。

e.dataTransfer.setData('text/plain', JSON.stringify(item)) 让 drop 端获取拖拽的数据。

拖拽过程中（dragover）——（事件：dragover，即 拖拽对象悬停在目标上时触发）

必须 preventDefault()，否则 drop 事件不会触发

拖拽目标 -> 拖拽结束（drop）

读取 dataTransfer.getData() 获取拖拽的数据。

在目标区域渲染组件。

@dragover.prevent：阻止默认行为，允许 drop 触发。（默认情况下，浏览器不允许drop）

@drop="onDropCanvas"：处理组件释放到画布的逻辑。

e.dataTransfer.getData('text/plain') 读取拖拽的数据。

canvasComponents.value.push() 添加组件到画布。

例子 —— 简易拖拽代码（H5： dataTransfer.setData + store 维护数据）

<!-- test.vue -->
<script setup>
import e from 'cors';
import { store } from './store.js';

const componentList  = [
    { id: 1, type: 'Container' },
    { id: 2, type: 'Text'},
];
// 拖拽开始事件
const onDragStart = (e, item) => {
    e.dataTransfer.setData('text/plain', JSON.stringify(item)); // 设置拖拽开始 传输的数据，纯文本 字符串，将 item 对象 转为字符串存储，便于后续drop解析
    e.dataTransfer.effectAllowed = 'copy';      // 拖拽效果，拖拽类型。copy 指 复制，不影响原数据；move，表 移动，可能会删原数据；link，表示创建链接
    store.setDragItem(item, true);   // 记录当前正在拖拽的组件信息。true表示从组件库拖拽。（区分，从组件库 拖拽，和 画布内拖拽）
}  

const onDropCanvas = () => {
    // const itemData = e.dataTransfer.getData('text/plain');   // 获取拖拽的数据
    // if(!itemData) return;
    // const item = JSON.parse(itemData);  // 将字符串转为对象
    console.log("drop拖拽开始")
    store.dropToCanvas(null);
}
</script>
<template>
    <div class="app1">
        <h3>组件库（可拖动）</h3>
        <div 
            v-for="(item, index) in componentList"
            :key="item.id"
            class="draggable-item"
            draggable="true"
            @dragstart="onDragStart($event, item)"
        >
            {{ item.type }}
        </div>
        <h3>画布区域</h3>
        <div class="canvas"
            @dragover.prevent
            @drop="onDropCanvas"
        >
        <!--@dropover.prevent 阻止默认行为。（默认情况下，浏览器不允许drop）  -->
            <div v-for="(item, index) in store.treeData" :key="item.id" class="draggable-item">
                {{ item.type }}-{{ item.id }}
            </div>
        </div>
    </div>
</template>
<style scoped lang='scss'>
.app1 {
    padding: 20px;
    .draggable-item {
        border: 1px solid #ccc;
        text-align: center;
        width: 300px;
        height: 100px;
        line-height: 100px;
        background:pink;
    }
    .canvas {
        border: 2px dashed #ccc;
        width: 500px;
        height: 300px;
        margin-top:20px;
        // background: skyblue;
    }
}
</style>

// store.js
import { reactive } from 'vue'
export const store = reactive({
    treeData: [],   // 画布中的组件数据
    dragItem: null, // 当前拖拽的组件
    isRawComponents: false,   // 是否是组件库的
    
    // 设置当前拖拽的组件
    setDragItem(item, isRawComponents = false){
        this.dragItem = item;
        this.isRawComponents = isRawComponents;
        console.log("设置当前拖拽的组件。")
    },

    // 拖拽到画布中
    dropToCanvas() {
        if(!this.dragItem) return;

        const newItem = {
            id: Date.now(),
            type: this.dragItem.type,
            children: [],   // 支持未来qiantao
        };

        this.treeData.push(newItem);
        console.log("拖拽到画布。")
        this.dragItem = null;   // 清空拖拽数据
    }
})

本例分析：

通过 全局 store 维护了拖拽数据，而不是使用 dataTransfer.getData 来获取拖拽数据。

onDragStart 事件
- 当用户开始拖拽组件库中的组件时，会执行 onDragStart 方法。
- onDragStart 里除了使用 e.dataTransfer.setData 之外，还调用了 store.setDragItem(item, true)，这个方法的作用是在全局的 store 里记录当前拖拽的组件信息，并标记它是从组件库拖拽的（true）。
onDropCanvas 事件
- 当拖拽到画布区域并触发 onDropCanvas 时，并没有使用 e.dataTransfer.getData 获取数据。
- 取而代之的是 store.dropToCanvas(null);，这个方法直接从 store 里获取之前存储的 dragItem 并添加到 treeData 里。
dropToCanvas 方法
- dropToCanvas 方法检查 this.dragItem 是否存在，如果存在，就创建一个新的 newItem 并添加到 treeData 里。
- 这样，数据传递并没有通过 dataTransfer.getData，而是通过全局 store 变量来完成的。

拖拽流程：

onDragStart(e, item) → store.setDragItem(item, true); 记录拖拽的组件数据。
onDropCanvas() → store.dropToCanvas(null); 获取 store.dragItem 并添加到 treeData 里。

两种拖拽方式：

①dataTransfer.setData 和 getData 适用于不同的页面或应用之间的数据传递，但

②在同一个 Vue 组件的状态管理下，getData部分完全可以使用 Vue 的 store 机制来管理拖拽数据。

②用 Vue 的 store 机制来管理拖拽数据的优势：

避免 dataTransfer.getData 只能存储字符串的限制，直接在 store 里存储对象数据，不用手动 JSON.stringify 和 JSON.parse。

数据可以跨多个事件存储，即使拖拽过程中发生变化（比如鼠标移动到不同位置），仍然可以获取正确的数据。

更方便管理拖拽状态，比如可以在 store 里添加 isDragging 状态，防止意外行为。