Vue 实现拖拽模块

本文主要介绍了vue拖拽组件实现构建页面的简单实现，文中通过示例代码介绍，感兴趣的小伙伴们可以了解一下

本文主要介绍了 Vue拖拽添加组件的简单实现，具体如下：

效果图

实现思路

使用 H5 的新特性拖放操作来实现，拖拽左侧的组件放到右边主体部分，然后主体部分识别拖拽组件加载到盒子中 拖拽事件和属性

拖放操作的事件描述

H5拖拽属性 draggable

draggable：当需要某个元素可以拖拽时，需设置为true，默认为false。选中的文本、图片、链接默认可以拖拽。

DataTransfer对象：该属性用于保存拖放的数据和交互信息，通过 event 事件进行绑定属性和读取属性。
event.dataTransfer.getData(“绑定的属性名”);
event.dataTransfer.setData(“属性名”, “属性值”);

实现过程

1. 给拖拽组件绑定 dragstart 事件用于监听拖拽开始
2. 给拖拽组件添加 draggable=“true” 用于开启元素拖拽
3. 给拖拽组件绑定 dragover.prevent 用于阻止浏览器默认行为, 不然会显示一个X，加上后在鼠标拖拽时会显示一个添加的小按钮
4. 在 dragstart 触发的时候，需要把事件对象和当前数据传到方法中
5. 把当前数据转换为字符串，并通过event.dataTransfer.setData() 方法，设置到 dataTransfer 对象中
6. 给目标元素绑定 drop 事件，监听拖拽组件放到了当前元素中并使用event.dataTransfer.getData() 获取event对象上班绑定的拖拽元素的数据，保存到拖拽后的数组，然后把获取鼠标位置,将拖拽元素加载到鼠标放下的位置。
7. 给拖拽元素绑定 dragover.prevent 用于阻止默认行为

完整代码

<template>
  <div class="box">
    <!-- 左侧拖拽组件 -->
    <div class="drap">
      <!-- 
            @dragstart  < -- 是元素开始拖拽的时候触发
            draggable="true"  < -- 为了使元素可拖动，把 draggable 属性设置为 true ：
            @dragover.prevent < -- 阻止浏览器默认行为，不然会显示一个叉叉，不好看, 加上会显示一个添加的符号
         -->
      <div
        v-for="(item, index) in drapLeftElList"
        class="drap-item"
        :key="index"
        @dragstart="handleDrapEvList($event, item)"
        @dragover.prevent
        draggable="true"
      >
        <img
          class="drap-item-img"
          draggable="false"
          :src="item.imgUrl"
          :alt="item.name"
        />
        <div class="drap-item-name">{{ item.name }}</div>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="drap-container" @dragover.prevent @drop="handleDrap">
        <!-- @mousedown.stop="handleMouseDown($event, item, index)"
        @mouseup.stop="handleMouseUp" -->
      <div
        v-for="(item, index) in componentsList"
        class="drap-container-item"
        :key="index"
        :style="{ top: `${item.position.y}px`, left: `${item.position.x}px` }"
        @click="handleClick(item, index)"
      >
        <img class="drap-item-img" :src="item.imgUrl" :alt="item.name" />
        <div class="drap-item-name">{{ item.name }}</div>
      </div>
    </div>
    <!-- 属性配置 -->
    <div class="drap-right" style="width: 300px">
      属性配置
      {{ identifier }}
      {{ curControl }}
    </div>
  </div>
</template>

<script>
export default {
  name: "drap",
  data() {
    return {
      // 保存拖拽的元素的列表
      componentsList: [],
      //   元件库
      drapLeftElList: [
        {
          id: 11,
          name: "团队1",
          imgUrl:
            "http://img2.3png.com/68604d0c41a6cbc132055d03bbfade602ff7.png",
          sort: 1,
          position: {
            x: 0,
            y: 0,
          },
        },
        {
          id: 13,
          name: "团队2",
          imgUrl:
            "http://img2.3png.com/68604d0c41a6cbc132055d03bbfade602ff7.png",
          sort: 2,
          position: {
            x: 0,
            y: 0,
          },
        },
        {
          id: 14,
          name: "团队3",
          imgUrl:
            "http://img2.3png.com/68604d0c41a6cbc132055d03bbfade602ff7.png",
          sort: 3,
          position: {
            x: 0,
            y: 0,
          },
        },
        {
          id: 15,
          name: "团队4",
          imgUrl:
            "http://img2.3png.com/68604d0c41a6cbc132055d03bbfade602ff7.png",
          sort: 3,
          position: {
            x: 0,
            y: 0,
          },
        },
      ],
      identifier: "", // 当前项的 唯一标识
      curControl: null, // 当前点击的是哪个组件
    };
  },
  methods: {
    handleDrapEvList(event, value) {
      let { offsetX, offsetY } = event;
      var infoJson = JSON.stringify({
        ...value,
        position: {
          ...value.position,
          x: offsetX,
          y: offsetY,
        },
      });
      //   将数据绑定到dataTransfer身上
      event.dataTransfer.setData("drapData", infoJson);
    },
    // 监听拖拽元素结束
    handleDrap(event) {
      event.preventDefault();
      const value = event.dataTransfer.getData("drapData");
      //   获取绑定到拖拽元素身上的 drapData属性
      if (value) {
        let drapData = JSON.parse(value);
        // 获取指定鼠标在拖拽组件身上点击的位置
        
        const { position } = drapData;
        const identifier = Math.floor(Math.random() * 10000);
        // 获取当前鼠标拖拽结束的位置
        const {offsetX, offsetY} = event
        this.componentsList.push({
          ...drapData,
          identifier,
          position: {
            ...position,
 // 用鼠标拖拽结束的位置减去鼠标在元素上点击的位置, 就得到拖拽元素放置的当前位置
            x: offsetX - position.x,
            y: offsetY - position.y,
          },
        });
      }
    },
    // 点击元素获取组件配置
    handleClick(row, index) {
      this.identifier = row.identifier;
      this.curControl = row;
    },
  },
};
</script>

<style lang="scss">
.box {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 500px;
  overflow: hidden;
  .drap {
    width: 300px;
    height: 500px;
    background: #f2f2f2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    cursor: pointer;
    .drap-item {
      height: 120px;
      margin-right: 20px;
      .drap-item-img {
        display: block;
        width: 80px;
        height: 80px;
      }
      .drap-item-name {
        text-align: center;
      }
    }
  }
  .drap-container {
    flex: 1;
    height: 500px;
    background: #ccc;
    position: relative;
    .drap-container-item {
      -webkit-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;
      position: absolute;
      user-select: none;
      .drap-item-img {
        display: block;
        width: 80px;
        height: 80px;
      }
      .drap-item-name {
        text-align: center;
      }
    }
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208

总结

以上就是今天要分享的内容，本文简单介绍了 拖拽组件的拖拽功能和目标元素的识别并加载到指定位置

接下来我们会逐步去实现针对拖拽组件的设置位置、设置样式、设置属性、绑定事件等操作