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

效果预览

技术要点

  • img 标签默认就是可拖拽的(a 标签也是)
  • 事件 e 内的 dataTransfer 对象可用于临时存储事件过程中的数据
  • 拖拽事件的默认行为是用浏览器新开页签打开被拖拽对象,所以通常需要禁用默认的浏览器行为
  • 被拖拽元素必须设置 id,方便放置时,获取到被拖拽的元素
  • 被拖拽元素响应事件 dragstart,一旦开启拖动,便将被拖拽的元素的 id 存入 dataTransfer 对象
  • 放置的容器响应事件 drop,通过 appendChild 将被拖拽的元素添加到放置的容器中

代码范例

html 复制代码
<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>
相关推荐
luquinn7 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
烛阴7 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
啃火龙果的兔子8 小时前
js获取html元素并设置高度为100vh-键盘高度
javascript·html·计算机外设
wifi歪f12 小时前
🎉 Stenciljs,一个Web Components框架新体验
前端·javascript
不爱说话郭德纲12 小时前
👩‍💼产品姐一句小优化,让我给上百个列表加上一个动态实时计算高度的方法😿😿
前端·vue.js·性能优化
知识分享小能手13 小时前
React学习教程,从入门到精通, React教程:构建你的第一个 React 应用(1)
前端·javascript·vue.js·学习·react.js·ajax·前端框架
李剑一13 小时前
别乱封装,你看出事儿了吧...
前端·vue.js
gongzemin13 小时前
Vue 项目权限管理 路由 按钮权限
前端·vue.js
Flame_13 小时前
一行代码搞定Vue3异步请求:vue3-request让状态管理从地狱到天堂
vue.js
FAIRY_STARS13 小时前
VUE3大屏自适应布局
vue.js