vue 基于html5,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, 否则的元素会自己抖动。

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

案例二：

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

• 

事件绑定方法：

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