效果预览
技术要点
- img 标签默认就是可拖拽的（a 标签也是）
- 事件 e 内的 dataTransfer 对象可用于临时存储事件过程中的数据
- 拖拽事件的默认行为是用浏览器新开页签打开被拖拽对象，所以通常需要禁用默认的浏览器行为
- 被拖拽元素必须设置 id，方便放置时，获取到被拖拽的元素
- 被拖拽元素响应事件 dragstart，一旦开启拖动，便将被拖拽的元素的 id 存入 dataTransfer 对象
- 放置的容器响应事件 drop，通过 appendChild 将被拖拽的元素添加到放置的容器中
代码范例
<script setup> function allowDrop(e) { e.preventDefault() } function drag(e) { e.dataTransfer.setData('logo', e.target.id) } function drop(e) { e.preventDefault() let data = e.dataTransfer.getData('logo') e.target.appendChild(document.getElementById(data)) } </script> <template> <div class="row"> <div class="box" @drop="drop" @dragover="allowDrop"> <img id="logo" @dragstart="drag" src="./ecLogo.jpg" alt="EC编程俱乐部的logo" height="60" /> </div> <div class="box" @drop="drop" @dragover="allowDrop"></div> </div> </template> <style lang="scss" scoped> .row { display: flex; } .box { border: 1px solid black; height: 200px; width: 200px; } </style>
