vue之关于HTML5拖放（drag）

简单拖放可参考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>

实现原理其实和后台两个值交换一样，前端呢就是将两个元素进行互换。当然要实现像组件一样那些好看的效果，需要自己进行样式添加，动态设置样式等。