简单拖放可参考w3schoo中H5拖放教程可实现将某部分元素拖放至指定元素内。
主要记录下拖放实现位置互换
使用html文本文件的可参考:
https://www.cnblogs.com/shemingxin/p/13519799.html
主要记录下vue实现H5的拖放位置互换,虽然有些组件可实现,但样式调整修改不易。下面简单例子记录下拖放的实现
代码部分及简单样式
<template>
<div class="hello">
<el-row :gutter="20">
<el-col :span="8" v-for="(item,index) in 3" :key="(item,index)">
<div :id="'div'+item" @drop="drop($event,item,index)"
@dragover="allowDrop($event)">
<p :id="'drag'+item" ref="drag" draggable="true"
@dragstart="drag($event,item,index)">{{item}}</p>
</div>
</el-col>
</el-row>
</div>
</template>
<style scoped>
#div1,#div2,#div3{
border: 1px solid red;
height: 100px;
width: 100%;
font-size: 36px;
cursor: pointer;
}
</style>
方法部分
<script>
export default {
data () {
return {
srcidv:null,
temp:null,
}
},
methods:{
drag(event,item,index){
let divdom = this.$refs.drag[index]
//获取到元素
this.srcidv = divdom;
this.temp = divdom.innerHTML;
},
drop(event,item,index){
event.preventDefault();
let divdom = this.$refs.drag[index]
if(this.srcidv != divdom){
this.srcidv.innerHTML = divdom.innerHTML;
divdom.innerHTML = this.temp;
}
//假如div里面时echarts图表
// $('div').removeAttr('_echarts_instance_')
},
allowDrop(event){
event.preventDefault()
},
}
}
</script>
实现原理其实和后台两个值交换一样,前端呢就是将两个元素进行互换。当然要实现像组件一样那些好看的效果,需要自己进行样式添加,动态设置样式等。