事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动。
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'>