if (x === 0 && y === 0) {
return // 不处理拖动最后一刻X和Y都为0的情形
}
x -= this.offsetX
y -= this.offsetY
// console.log('e left')
// console.log(x + '-' + y)
/* 它的父级第一个存在定位的元素，如果有margin减去margin值 */
e.target.style.left = x - 5 + 'px'
e.target.style.top = y - 60 + 'px'
}
},
drop (ev) {
console.log('drop拖放事件,绑定可拖放区域', event)
this.text = ev.dataTransfer.getData('Text')
console.log(this.text)
let target = document.getElementById(this.text)
ev.target.appendChild(target)
ev.preventDefault()
},
dragend (event) {
event.dataTransfer.clearData()
}
如果不出意外的话，以上代码已经成功实现了元素从左边拖到右边。但是，右边元素被拖走了，右边就没有了，然后我尝试了各种，拖动开始时clone 元素，drap时clone元素等等，都不太完美。此时的我，崩溃……
终于，也不知道哪来的灵感，这个困扰我两秒的难题突然就被我成功攻克了。好了，我要开始吹牛了……
案例三：
我的思路是这样的（不想看？直接看代码好了，反正是给我自己看的）：左边列表元素可拖动（draggable=’true’）,绑定dragstart(开始事件)，不要给它绑定draging(拖动事件)，这样左边列表元素有拖动属性，但是位置不会改变。当右侧拖动区域
第一次触发了drop 操作后，新生成一个对象，这个对象既有拖动（draggable=’true’）属性,也绑定dragstart(开始事件)，拖动事件（drag）,这样新元素会在右侧随意拖动。那么怎么新生成一个元素呢？自然不是appendChild 之类的，利用Vue 双向绑定的特性，
页面上循环数组元素，生成元素即往数组中push 元素即可。每次拖动元素都会触发drop 事件，并不是每次都要生成一个新元素，要知道是从左边列表拖到右侧第一次drop 的时候生成新元素。怎么知道呢？这就是两个dragstart的妙处
<t<template>
<div style='position: relative;'>
<el-container>
<el-aside width="300px">
<ul>
<li class='liStyle' v-for="item in tags" :key='item.id'>
<img src="../assets/timg.png" class='msg' alt="" @dragstart="dragstart" draggable="true" :id='item.id' @dragend="imgEnd">
</li>
</ul>
</el-aside>
<el-main>
<div @drop.prevent="drop" @dragover.prevent style='height:1000px;width:1800px;'>
<img src="../assets/timg.png" class='msg' :style="{left:item.x+'px',top:item.y+'px'}" alt="" v-for="(item, $index) in InfoList" :key='$index' @dragstart="imgStart" draggable="true" @drag='draging($event,item)' @dragend="imgEnd">
