html怎么拖走图片,vue中基于html5dragdrap的拖放

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

案例一：

开始的我，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

if (x === 0 && y === 0) {

return // 不处理拖动最后一刻X和Y都为0的情形

}

x -= this.offsetX

y -= this.offsetY

// console.log('e left')

// console.log(x + '-' + y)

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.getElementByIdx_x_x(this.text)

ev.target.a(target)

ev.preventDefault()

},

dragend (event) {

event.dataTransfer.clearData()

}

如果不出意外的话，以上代码已经成功实现了元素从左边拖到右边。但是，右边元素被拖走了，右边就没有了，然后我尝试了各种，拖动开始时clone

元素，drap时clone元素等等，都不太完美。此时的我，崩溃……

终于，也不知道哪来的灵感，这个困扰我两秒的难题突然就被我成功攻克了。好了，我要开始吹牛了……

案例三：

我的思路是这样的(不想看？直接看代码好了，反正是给我自己看的)：左边列表元素可拖动(draggable='true'),绑定dragstart(开始事件)，不要给它绑定draging(拖动事件)，这样左边列表元素有拖动属性，但是位置不会改变。当右侧拖动区域

第一次触发了drop

操作后，新生成一个对象，这个对象既有拖动(draggable='true')属性,也绑定dragstart(开始事件)，拖动事件(drag),这样新元素会在右侧随意拖动。那么怎么新生成一个元素呢？自然不是a

之类的，利用Vue 双向绑定的特性，

页面上循环数组元素，生成元素即往数组中push 元素即可。 每次拖动元素都会触发drop

事件，并不是每次都要生成一个新元素，要知道是从左边列表拖到右侧第一次drop 的时候生成新元素。

怎么知道呢？这就是两个dragstart的妙

methods: {

dragstart (ev) {

let info = { id: ev.target.id, isDrop: true }

ev.dataTransfer.setData('Text', JSON.stringify(info))

this.offsetX = ev.offsetX

this.offsetY = ev.offsetY

},

drop (e) {

let info = JSON.parse(e.dataTransfer.getData('Text'))

if (info.isDrop) {

var x = e.clientX

var y = e.clientY

x -= this.offsetX

y -= this.offsetY

info.x = x - 5

info.y = y - 60

info.id = info.id + Date.parse(new Date())

this.InfoList.push(info)

}

},

imgStart (e) {

let info = { isDrop: false }

e.dataTransfer.setData('Text', JSON.stringify(info))

this.imgOffsetX = e.offsetX

this.imgOffsetY = e.offsetY

},

draging (e, item) {

item.x = e.clientX - this.imgOffsetX - 5

item.y = e.clientY - this.imgOffsetY - 60

},

imgEnd (event) {

console.log('done')

console.log(event)

event.dataTransfer.clearData()

}

}

注意：拖动元素设置position:absolute属性