如何实现拖拽circle1到circle2上时square1自动替换为square2图片

用原生HTML5拖拽API就能实现这个效果，不需要引入任何第三方库，核心逻辑很简单：

• 给可拖拽的circle1开启拖拽属性，拖拽启动时打个标记，避免其他元素拖拽也触发切换
• 给作为放置目标的circle2绑定拖入事件，阻止默认行为——这步必须做，不然浏览器会默认拦截放置操作，触发不了后续逻辑
• 监听放置动作，确认拖过来的是circle1时，直接把第三个方块图的src改成square2的路径就行

完整代码如下，直接替换你原来的HTML即可：

<img id="circle1" src="i/circle1.png" draggable="true">
<img id="circle2" src="i/circle2.png">
<img id="square" src="i/square1.png">

<script>
const circle1 = document.getElementById('circle1')
const circle2 = document.getElementById('circle2')
const square = document.getElementById('square')

circle1.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('dragId', 'circle1')
})

circle2.addEventListener('dragover', (e) => {
  e.preventDefault()
})

circle2.addEventListener('drop', (e) => {
  e.preventDefault()
  if (e.dataTransfer.getData('dragId') === 'circle1') {
    square.src = 'i/square2.png'
  }
})
</script>

可选扩展 #

• 如果需要拖拽元素离开circle2区域时自动切回原来的square1，给circle2加个dragleave事件监听，触发时把square.src改回i/square1.png就行
• 想优化交互体验的话，可以在dragstart时给拖拽元素加半透明、阴影效果，dragend的时候移除，拖拽过程的视觉反馈会更清晰

效果参考：

内容的提问来源于stack exchange，提问作者Gohan