I recently wrote a project using the vuedraggable plug-in to generate components. Since I used it for the first time, I searched for related articles on the Internet. As a result, the Internet is basically dragging up and down. I didn’t find the result I wanted, and then I used it according to myself. Requirements combined with relevant documents for development
After the development, the approximate result video is as follows:
vuedraggable drag and drop to generate components
The static effect is as follows:
Step 1: Download dependencies:
npm i -S vuedraggableStep 2: Introduce in the project:
import draggable from "vuedraggable";
The third step is to view related properties and methods:
Attributes:
event:
Please refer to the official website for details on how to use attributes and events:
Chinese (Chinese translation, may not be updated in time): vue.draggable Chinese documentation - itxst.com
English: https://www.itxst.com/vue-draggable/tutorial.html
Step 4: Use html in the code
<template>
<div>
<div class="">
<draggable
v-model="applyList"
:group="{ name: 'piece', pull: 'clone', put: true }"
animation="100"
:sort="false"
:clone="addComponent"//左边应用组数据
>
<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"//左边应用数据
>
<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">//右边空数组
<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"//父级空数组
: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"//子级空数组
: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：
<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: "互连网+",
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) {
//根据exist来判断，为true就return，false就push进去
this.$message({
message: "组件里已经有相同的应用组啦，请拖拽其他应用组哦",
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) {
//根据exist来判断，为true就return，false就push进去
this.$message({
message: "组件里已经有相同的应用啦，请拖拽其他应用哦",
type: "warning",
});
return;
} else {
const clone = origin;
return clone;
}
},
onEnd() {
this.drag = false;
},
save() {},
// 编辑
},
};
</script>The above is the process of using this plugin in the project. If you don’t understand, you can send me a private message.