vue3【实战】来回拖拽放置图片

效果预览

技术要点

• 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>

原文地址：https://blog.csdn.net/weixin_41192489/article/details/140202135

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！