本文主要介紹了vue拖拽組件實現(xiàn)構(gòu)建頁面的簡單實現(xiàn)，文中通過示例代碼介紹，感興趣的小伙伴們可以了解一下
本文主要介紹了 Vue拖拽添加組件的簡單實現(xiàn)，具體如下：
效果圖
實現(xiàn)思路
使用 H5 的新特性拖放操作來實現(xiàn)，拖拽左側(cè)的組件放到右邊主體部分，然后主體部分識別拖拽組件加載到盒子中 拖拽事件和屬性
拖放操作的事件描述
| 事件名稱 | 事件描述 |
|---|---|
| dragstart | 當單擊下鼠標，并移動之后執(zhí)行。 |
| drag | 在dragstart執(zhí)行之后，鼠標在移動時連續(xù)觸發(fā)。 |
| dragend | 當拖拽行為結(jié)束，也就是松開鼠標的時候觸發(fā)。 |
| dragenter | 當正在拖拽的元素的標記進入某個Dom元素時觸發(fā)，自身首先會觸發(fā)。被進入的Dom元素會觸發(fā)這個事件。 |
| dragover | 當拖拽的元素的標記在進入的Dom元素上移動時觸發(fā)，在自身移動時也會觸發(fā)。 |
| dragleave | 當拖拽的元素在離開進入的Dom時觸發(fā)。 |
H5拖拽屬性 draggable
draggable：當需要某個元素可以拖拽時，需設置為true，默認為false。選中的文本、圖片、鏈接默認可以拖拽。
DataTransfer對象：該屬性用于保存拖放的數(shù)據(jù)和交互信息，通過 event 事件進行綁定屬性和讀取屬性。
event.dataTransfer.getData(“綁定的屬性名”);
event.dataTransfer.setData(“屬性名”, “屬性值”);
實現(xiàn)過程
- 給拖拽組件綁定 dragstart 事件用于監(jiān)聽拖拽開始
- 給拖拽組件添加 draggable=“true” 用于開啟元素拖拽
- 給拖拽組件綁定 dragover.prevent 用于阻止瀏覽器默認行為, 不然會顯示一個X，加上后在鼠標拖拽時會顯示一個添加的小按鈕
- 在 dragstart 觸發(fā)的時候，需要把事件對象和當前數(shù)據(jù)傳到方法中
- 把當前數(shù)據(jù)轉(zhuǎn)換為字符串，并通過event.dataTransfer.setData() 方法，設置到 dataTransfer 對象中
- 給目標元素綁定 drop 事件，監(jiān)聽拖拽組件放到了當前元素中并使用event.dataTransfer.getData() 獲取event對象上班綁定的拖拽元素的數(shù)據(jù)，保存到拖拽后的數(shù)組，然后把獲取鼠標位置,將拖拽元素加載到鼠標放下的位置。
- 給拖拽元素綁定 dragover.prevent 用于阻止默認行為
完整代碼
<template>
<div class="box">
<!-- 左側(cè)拖拽組件 -->
<div class="drap">
<!--
@dragstart < -- 是元素開始拖拽的時候觸發(fā)
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,
},
});
// 將數(shù)據(jù)綁定到dataTransfer身上
event.dataTransfer.setData("drapData", infoJson);
},
// 監(jiān)聽拖拽元素結(jié)束
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);
// 獲取當前鼠標拖拽結(jié)束的位置
const {offsetX, offsetY} = event
this.componentsList.push({
...drapData,
identifier,
position: {
...position,
// 用鼠標拖拽結(jié)束的位置減去鼠標在元素上點擊的位置, 就得到拖拽元素放置的當前位置
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>
總結(jié)
以上就是今天要分享的內(nèi)容，本文簡單介紹了 拖拽組件的拖拽功能和目標元素的識別并加載到指定位置文章來源：http://www.zghlxwxcb.cn/news/detail-692178.html
接下來我們會逐步去實現(xiàn)針對拖拽組件的設置位置、設置樣式、設置屬性、綁定事件等操作文章來源地址http://www.zghlxwxcb.cn/news/detail-692178.html
到了這里，關于Vue 實現(xiàn)拖拽模塊(一)拖拽添加組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
