vue 中基于html5 drag drap的拖放

事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。

vue 中基于html5 drag drap的拖放
案例一：

开始的我，so easy！ 通过绑定元素的mousedown 事件，监听鼠标的mousemove，和mouseup 事件，于是我轻松实现了同一区域内元素可以拖着跑，上代码！

move (e) {
 let odiv = e.target // 获取目标元素
 // 算出鼠标相对元素的位置
 let disX = e.clientX - odiv.offsetLeft
 let disY = e.clientY - odiv.offsetTop
 document.onmousemove = e => {

// 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置

 let left = e.clientX - disX
 let top = e.clientY - disY
 // 移动当前元素
 odiv.style.left = left + 'px'
 odiv.style.top = top + 'px'
 }
 document.onmouseup = e => {
 document.onmousemove = null
 document.onmouseup = null
 }
 }

注意一点，被拖拽对象区域要设置position:relative, 否则的元素会自己抖动。

以上代码并不能满足需要，要左右布局，左边的拖到右边，在右边区域随便拖动。

案例二：

好吧，首先我来布个局，左右布局，给元素绑定事件，上代码!

<template>
 <div style='position: relative;'>
 <el-container>
 <el-aside width="300px">
 <ul>
 <li class='liStyle' v-for="item in tags" :key='item.id'>