</div>
</el-main>
</el-container>
</div>
</template>
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属性
总结
以上所述是小编给大家介绍的vue 中基于html5 drag drap的拖放效果案例分析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
