最近有个需求是需要在web端定制手机的界面UI（具体实现比较复杂，此处不做阐述，此文章只说明拖拽效果实现），为了方便用户操作，就想实现这种效果：从右侧的图标列表中拖拽图标到左侧模拟的手机界面上，实现效果图如下：

拖拽效果示例代码（使用了H5的拖拽属性）：

<template><div><divdraggable="true"style="height: 100px; width: 200px; color: red"@drag="drag($event)"@dragend="dragend($event)"@dragstart="dragstart($event, dataStart)">{{ dataStart }} [tip: 拖动我到目的地]</div><div style="height: 100px; width: 200px; color: blue" draggable="false" @dragleave="dragleave($event)" @dragover="dragover($event)" @drop="drop($event)"><span>目的地：{{ dataEnd }}</span></div></div>
</template><script>export default {data() {return {dataStart: 'Hello World',dataEnd: '拖到我这里停止',}},methods: {dragstart(e, data) {//【开始拖动，并获取拖动的对象】console.log('拖拽开始')console.log(data)},drag(e) {console.log('拖拽中')},dragend(e) {console.log('拖拽结束')},dragleave(e) {console.log('拖拽离开')},dragover(e) {//【拖拽结束，此处一般不放其他代码】e.preventDefault()console.log('拖拽到这')},drop(e) {console.log('拖拽停止')//此处才算拖拽成功alert('松手！')//执行后续代码逻辑this.dataEnd = this.dataStart},},}
</script><style scoped></style>

实际使用中，一般只需使用到dragstart、dragover、drop即可，拖拽对象/区域使用dragstart，目标对象/区域使用drop，使用这个简单拖拽效果可以实现很多复杂好用的功能。