事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动。
案例一:
开始的我,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, 否则的元素会自己抖动。
以上代码并不能满足需要,要左右布局,左边的拖到右边,在右边区域随便拖动。
案例二:
好吧,首先我来布个局,左右布局,给元素绑定事件,上代码!
事件绑定方法:
dragstart (ev) {
console.log('dragstart拖拽开始事件,绑定于被拖拽元素上', event)
ev.dataTransfer.setData('Text', ev.target.id)
this.offsetX = ev.offsetX
this.offsetY = ev.offsetY
console.log(this.offsetX + '-' + this.offsetY)
},
draging (e) {
// console.log('拖动中')
var x = e.clientX
var y = e.clientY
// console.log('shubiao client')
if (x > 300) {
console.log(this.tags)
// drag事件最后一刻,无法读取鼠标的坐标,pageX和pageY都变为0