最近寫項目使用到了vuedraggable這個插件，進行組件生成，由于第一次使用，就上網(wǎng)搜相關文章，結果網(wǎng)上基本上都是上下拖拽之類的，沒有找到自己想要的結果，然后就根據(jù)自己的需求結合相關文檔進行了開發(fā)
開發(fā)完后大概結果視頻如下：
vuedraggable拖拽生成組件
靜態(tài)效果如下：
?第一步：下載依賴：
npm i -S vuedraggable第二步：在項目中引入：
import draggable from "vuedraggable";
第三步查看相關屬性和方法：
屬性：
?事件：
?屬性和事件使用方法請詳看 官網(wǎng)：
中文（國人翻譯，可能更新不及時）：vue.draggable中文文檔 - itxst.com
英文：https://www.itxst.com/vue-draggable/tutorial.html
第四步：在代碼里使用 html
<template>
<div>
<div class="">
<draggable
v-model="applyList"
:group="{ name: 'piece', pull: 'clone', put: true }"
animation="100"
:sort="false"
:clone="addComponent"http://左邊應用組數(shù)據(jù)
>
<div class="employ" v-for="item in applyList" :key="item.id">
<span class="nr">{{ item.name }}</span>
</div>
</draggable>
</div>
<div class="">
<draggable
v-model="applyList"
:group="{ name: 'piece', pull: 'clone', put: true }"
animation="100"
:sort="false"
:clone="addComponent"http://左邊應用數(shù)據(jù)
>
<div class="employ" v-for="item in applyList" :key="item.id">
<span class="nr">{{ item.name }}</span>
</div>
</draggable>
</div>
<div>
<draggable v-model="onList" group="piece" animation="100">//右邊空數(shù)組
<transition-group :style="style">
<div class="myEmploy" v-for="item in onList" :key="item.id">
<span class="zjNr"
>{{ item.name }}
<div class="ddd">
<draggable
v-model="item.myList"http://父級空數(shù)組
:group="{
name: 'theChild',
pull: 'clone',
}"
animation="100"
:clone="cloneComponent"
:sort="true"
>
<transition-group :style="style">
<!-- 子應用 -->
<div class="caTion" :key="item.id">
<div
class="suBAppLicaTion"
v-for="(it, idx) in item.myList"http://子級空數(shù)組
:key="idx"
>
<i
class="el-icon-circle-close myDelete"
@click="onDelete(idx)"
></i>
<img :src="it.url" alt="" />
<span class="ziNr">{{ it.name }}</span>
</div>
</div>
</transition-group>
</draggable>
</div>
</span>
</div>
</transition-group>
</draggable>
從左側拖入或點選組件進行應用組合
</div>
</div>
</template>js：文章來源：http://www.zghlxwxcb.cn/news/detail-457243.html
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
data() {
return {
applyList: [
{
name: "前端小腦虎",
id: 1,
},
{
name: "關注我，不迷路",
id: 2,
},
{
name: "vue問題大全",
id: 3,
},
{
name: "歡迎來到深圳",
id: 4,
},
],
useList: [
{
url: require("../../assets/images/profile.jpg"),
name: "學習呀",
id: 5,
},
{
url: require("../../assets/images/profile.jpg"),
name: "前端耐斯",
id: 6,
},
{
url: require("../../assets/images/profile.jpg"),
name: "前端小腦虎",
id: 7,
},
{
url: require("../../assets/images/profile.jpg"),
name: "深圳歡迎你",
id: 8,
},
],
list: [
{
url: require("../../assets/images/profile.jpg"),
name: "互連網(wǎng)+",
id: 1,
},
{
url: require("../../assets/images/profile.jpg"),
name: "直裝直提",
id: 2,
},
],
onList: [],
myList: [],
style: "min-height:120px;display: block;",
utilize: false,
AppGroup: false,
};
},
methods: {
// 刪除
onDelete(idx) {
this.onList.forEach((item) => {
const id = item.myList[idx].id;
item.myList.splice(idx, 1);
console.log("item", item.myList);
});
},
// 子應用添加
newSubAppLicaTion(item) {
const clone = this.cloneComponent(item);
this.onList.forEach((item) => {
if (item.myList) {
item.myList.push(clone);
} else {
item.myList = [clone];
}
});
},
// 應用組添加
addComponent(item) {
let exist = false;
this.onList.forEach((it) => {
//遍歷onList，判斷是否當前拖拽的應用組內容是否存在，存在就賦值exist為true并return
if (it.id == item.id) {
exist = true;
return;
}
});
if (exist) {
//根據(jù)exist來判斷，為true就return，false就push進去
this.$message({
message: "組件里已經(jīng)有相同的應用組啦，請拖拽其他應用組哦",
type: "warning",
});
return;
} else {
const clone = item;
this.onList.push({ ...clone, myList: [] });
}
},
// 應用復制
cloneComponent(origin) {
let exist = false;
this.onList.forEach((item) => {
item.myList.forEach((it) => {
//遍歷myList，判斷是否當前拖拽的應用內容是否存在，存在就賦值exist為true并return
if (it.id == origin.id) {
exist = true;
return;
}
});
});
if (exist) {
//根據(jù)exist來判斷，為true就return，false就push進去
this.$message({
message: "組件里已經(jīng)有相同的應用啦，請拖拽其他應用哦",
type: "warning",
});
return;
} else {
const clone = origin;
return clone;
}
},
onEnd() {
this.drag = false;
},
save() {},
// 編輯
},
};
</script>以上就是這個插件在項目中使用的流程 如果有不懂可以私信我文章來源地址http://www.zghlxwxcb.cn/news/detail-457243.html
到了這里，關于vue使用vuedraggable拖拽組件，進行組件生成的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
