Use vue v-for loop rendering dom, to do drag and drop, now only one element has a background, how to drag and drop the released element has a style?
topic description
requirements: set database external table keys, push and drop several table fields at will, be dragged and released background discoloration
sources of topics and their own ideas
related codes
/ / Please paste the code text below (do not replace the code with pictures)
< template >
< div class= "set-waijian" >
<div class="waijian">
<el-row :gutter="100">
<el-col :span="4" v-for="schema,index in tmpData">
<div class="waijian-box" >
<div class="waijian-tit">
<span>{{schema.name}}</span>
</div>
<div class="waijian-body">
<div>
<template v-if="schema.columns.length == 0">
<span></span>
</template>
<template >
<span ref="span" @click="setColor(item,i,index)" :accessKey="i" @dragstart="dragstart($event,schema,item,i,index)"
@drop="drop($event,schema,item,i,index)"
onselectstart="return false;"
@dragover.prevent
draggable="true" v-for="item,i in schema.columns" :class="{color:(index==indexPrevP && i==indexPrev)}">
{{item.name }}<br>
</span>
</template>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
< / div >
< / template >
dragstart (event,data,item,i,index) {
console.log(111)
console.log(event);
// console.log(data);
console.log(item);
this.indexPrevP = index
this.indexPrev = i
},
setColor(data,i,index) {
console.log(data,i,index);
this.indexPrevP = index
this.indexPrev = i
},
drop(event,data,item,i,index) {
console.log(event);
// console.log(data);
console.log(item);
this.indexPrevP = index
this.indexPrev = i
}
what result do you expect? What is the error message actually seen?
implement
< template >
< div class= "set-waijian" >
by name without indexing
<div class="waijian">
<el-row :gutter="100">
<el-col :span="4" v-for="schema,index in tmpData">
<div class="waijian-box" >
<div class="waijian-tit">
<span>{{schema.name}}</span>
</div>
<div class="waijian-body">
<div>
<template v-if="schema.columns.length == 0">
<span></span>
</template>
<template >
<span ref="span" @click="setColor(item,i,index)" :accessKey="i" @dragstart="dragstart($event,schema,item,i,index)"
@drop="drop($event,schema,item,i,index)"
onselectstart="return false;"
@dragover.prevent
draggable="true" v-for="item,i in schema.columns" :class="{color:colorItem[schema.name+'.'+item.name] }">
{{item.name }}<br>
</span>
</template>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
< / div >
< / template >
< script >
import Api from "@ / libs/api";
import {mapState} from "vuex";
export default {
data () {
return {
data:[],tmpData:[],
indexPrev:1,
indexPrevP:1,
colorItem:{},
color:[]
}
},
methods: {
loadData() {
console.log("");
console.log(this.count);
// this.loading = true;
var fieldType = [];
//
var WaijianFieldType = []
let fenkuFormWjian =JSON.parse(localStorage.getItem('fenkuFormWjian'))
if (fenkuFormWjian != null) {
for (let i = 0; i < fenkuFormWjian.length; iPP) {
WaijianFieldType.push(fenkuFormWjian[i].split('.')[1])
}
}
console.log(''+ WaijianFieldType)
console.log("");
console.log(localStorage.getItem("charStyle"));
let charStyle = localStorage.getItem("charStyle");
console.log(charStyle);
if (charStyle == "HASH") {
fieldType = [
"bit",
"bool",
"tinyint",
"mediumint",
"smallint",
"float",
"bigint",
"double",
"decimal",
"char",
"int",
"varchar",
"tinytext",
"text",
"mediumtext",
"longtext",
"tinyblob",
"blob",
"mediumblob",
"longblob",
"date",
"datetime",
"timestamp",
"time",
"year"
];
console.log(fieldType);
}
if (charStyle == "RANGE" || charStyle == "LIST") {
fieldType = [
"bit",
"bool",
"int",
"tinyint",
"mediumint",
"smallint",
"float",
"bigint",
"double",
"decimal",
"char",
"varchar",
"tinytext",
"text",
"mediumtext",
"longtext",
"tinyblob",
"blob",
"mediumblob",
"longblob"
];
console.log(fieldType);
}
console.log(localStorage.getItem("sqlNum"));
let fenbiaoTreeNum = localStorage.getItem("fenbiaoTreeNum");
let fenkuZiduan = localStorage.getItem("fenkuZiduan");
let fenkuZiduanLast = localStorage.getItem("fenkuZiduanLast");
let subStyle = localStorage.getItem("subStyle");
console.log("" + subStyle);
console.log("" + fenkuZiduanLast);
if (localStorage.getItem("sqlNum") == 2) {
let data = JSON.parse(localStorage.getItem("schemaData"));
console.log(data);
// let treeData = [];
// for (let i = 0; i < data.length; iPP) {
// let tableItem = {
// label: data[i].name,
// disabled:
// fenbiaoTreeNum == 2 && data[i].name !== fenkuZiduan
// ? true
// : false,
// children: []
// };
// console.log(tableItem);
// for (const tableKey of data[i].columns) {
// const columnItem = {
// label: tableKey.name,
// // //
// disabled: fieldType.includes(tableKey.type.desc.toLowerCase())
// ? false
// : true
// };
// if (tableItem.label !== fenkuZiduan && fenbiaoTreeNum == 2) {
// columnItem.disabled = true;
// }
// if (subStyle == "RANGE" || subStyle == "LIST") {
// if (columnItem.label == fenkuZiduanLast) {
// columnItem.disabled = true;
// }
// if ( WaijianFieldType.includes(columnItem.label)) {
// columnItem.disabled = true;
// }
// }
// console.log(columnItem);
// tableItem.children.push(columnItem);
// }
// treeData.push(tableItem);
// }
// this.data = treeData;
} else if (localStorage.getItem("sqlNum") == 1) {
//
let orderNum = localStorage.getItem("orderNum");
console.log(orderNum);
Api.newRule
.getSchema(orderNum)
.then(res => {
if (res.data.resCode == 10000) {
this.tmpData = res.data.data;
console.log(res.data.data);
// console.log(this.tmpData);
// let treeData = [];
// for (let i = 0; i < this.tmpData.length; iPP) {
// let tableItem = {
// label: this.tmpData[i].name,
// disabled:
// fenbiaoTreeNum == 2 && this.tmpData[i].name !== fenkuZiduan
// ? true
// : false,
// children: []
// };
// console.log(tableItem);
// for (const tableKey of this.tmpData[i].columns) {
// const columnItem = {
// label: tableKey.name,
// // //
// disabled: fieldType.includes(
// tableKey.type.desc.toLowerCase()
// )
// ? false
// : true
// };
// if (tableItem.label !== fenkuZiduan && fenbiaoTreeNum == 2) {
// columnItem.disabled = true;
// }
// if (subStyle == "RANGE" || subStyle == "LIST") {
// if (columnItem.label == fenkuZiduanLast) {
// columnItem.disabled = true;
// }
// if ( WaijianFieldType.includes(columnItem.label)) {
// columnItem.disabled = true;
// }
// }
// console.log(columnItem);
// tableItem.children.push(columnItem);
// }
// treeData.push(tableItem);
// }
// this.data = treeData;
}
})
.catch(res => {});
}
localStorage.getItem("sqlNum");
console.log(this.tmpData);
// let fenbiaoTreeNum = localStorage.getItem("fenbiaoTreeNum");
// localStorage.setItem("fenbiaoTreeNum",0);
// let fenkuZiduan = localStorage.getItem("fenkuZiduan");
// localStorage.setItem("fenkuZiduan",0);
// let data = this.count
// this.loading = false;
},
dragstart(event,data,item,i,index) {
console.log(111)
console.log(event);
console.log(data.name);
console.log(item);
this.indexPrevP = index
this.indexPrev = i
let nameOder = data.name+'.'+item.name
console.log(nameOder);
this.$set(this.colorItem,nameOder,true)
console.log(this.colorItem)
// this.$delete( this.colorItem,'inetlivepush.id' )
// for (const key in this.colorItem) {
// console.log(key);
// if (key == nameOder) {
// }else {
// this.$delete( this.colorItem,key )
// }
// }
for (const key in this.colorItem) {
if (key == nameOder) {
this.$set(this.colorItem,key,true)
}else if (key.split('.')[0] == nameOder.split('.')[0]) {
if (key.split('.')[1] != nameOder.split('.')[1]) {
this.$delete( this.colorItem,key )
}else {
}
}
}
},
setColor(data,i,index) {
console.log(data,i,index);
this.indexPrevP = index
this.indexPrev = i
},
drop(event,data,item,i,index) {
console.log(event);
console.log(data.name);
console.log(item);
this.indexPrevP = index
this.indexPrev = i
let nameOder = data.name+'.'+item.name
this.$set(this.colorItem,nameOder,true)
console.log(this.colorItem);
for (const key in this.colorItem) {
if (key == nameOder) {
this.$set(this.colorItem,key,true)
}else if (key.split('.')[0] == nameOder.split('.')[0]) {
if (key.split('.')[1] != nameOder.split('.')[1]) {
this.$delete( this.colorItem,key )
}else {
}
}
}
}
},
created () {
this.loadData()
}
}
< / script >
< style lang='scss' scopd >
.set-waijian {
overflow: hidden;
.waijian {
overflow: hidden;
.waijian-box {
// width: 200px;
text-align: center;
border: 2px solid -sharpeee;
box-sizing: border-box;
.waijian-tit {
background-color: -sharp90b6e1;
line-height: 40px;
// font-size: 24px;
}
.waijian-body {
span {
display: block;
padding: 5px 0;
// width: 196px;
border: 1px solid -sharpeee;
// background-color: pink;
}
}
}
}
}
.color {
background-color: pink;
}
< / style >
