vue3 - 详细实现鼠标按住后拖动图片到指定位置并自动贴合吸附盒子容器，左边和右边分别设置好容器将图像拖拽到任意位置，左右来回拖动放置图片，vue实现让图片可以拖拽交换位置，图片在两个盒子里互换位置

于 2024-08-22 22:54:31 发布
阅读量125 收藏 3
点赞数 8
分类专栏： 前端组件与功能(开箱即用) 文章标签： vue3 nuxt3 图片图像图标任意html元素 将图片元素左右来回拖曳 左边一个容器右边一个容器 拖曳 图像拖拽到指定范围并吸合贴边 左右两边固定范围图像来回拖动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/141439384
版权

效果图

在vue3、nuxt3项目开发中，详解实现两个盒子内图片元素位置任意互换，鼠标按住图片可拖动到自定义容器范围内，将图片拖曳到指定元素位置并自动贴边吸附，vue3实现拖拽图片切换图片位置，左右两侧可交替拖拽一张图像，左侧右侧两个范围HTML框可以来回拖拽放置图片，把鼠标按住不放拖曳图像或图标到指定元素周边附近后，松手即可自动吸附贴合。

提供详细示例代码，新手小白复制稍微改改就能用了。

在这里插入图片描述

完整源码

全部代码如下。

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 8
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vue3 - Element Plus 实现表格组件 el-table 拖曳拖动排序功能，支持复杂二级嵌套表格下级子项联动父级拖拽交换顺序位置，Table表格鼠标按住移动行列上移下移排序（详细示例代码
王佳斌
07-10 2938
vue3，nuxt3，element plus，表格，Table表格组件，el-table，拖曳排序，鼠标拖动排序，拖拽排序，改变表格行位置，鼠标拖动表格行row来交换位置，复杂表格，有下级的表格怎么拖曳排序，有二级下级的表格怎么拖曳排序，表格内的数据项拖拽排序，实现拖拽排序，详细教程，sortablejs，表格行拖拽，table表格 行列动态拖拽，数据无法更新怎么办，表格太复杂怎么排序，排序后拿不到行数据id，排序后怎么对接后端服务器，能展开二级的行，排序后如何对接接口，拖拽移动，Vue3 element
vue3 - 实现图片放大缩小和拖曳拖动功能，鼠标移入图像可拖曳移动，鼠标移入图像时滚轮放大缩小功能（vue3网页项目让图片支持鼠标拖动和滚轮放大缩小详细教程，提供完整示例源码，一键复制开箱即用！）
高级前端工程师
12-11 4341
vue3，vue3图片鼠标滚轮放大缩小，vue3图像拖曳拖动，vue3如何实现鼠标拖动图片移动，实现div和图片的拖拽放大缩小，vue3图片图像鼠标可拖动且缩小放大效果，vue3让div容器图片可拖动，图片怎么可鼠标滚轮放大，图像如何支持鼠标拖动和滚轮放大缩小，vue3中实现图片拖拽，vue3实现图片的放大缩小(以鼠标位置为中心放大缩小)以及拖拽功能，图片缩放，实现图片的随意拖动方法，实现用鼠标让图片放大缩小拖拽，vue3鼠标拖动图像 放大缩小，图像滚轮缩放和拖拽，vue3项目中鼠标滚轮缩放图片大小和拖拽效
vue3 - 最新详细实现头像上传并裁剪功能，用户上传头像裁剪圆形并上传到服务器教程，可搭配element plus或ant design vue组件库，支持头像预览、完美对接服务端接口（详细示例源码
高级前端工程师
04-12 3094
vue3，图片图像裁剪，头像上传，头像裁剪，vue3头像裁剪，element-plus，ant-design-vue，upload上传组件，vue头像上传裁剪，vue-cropper，实现用户上传图片后裁剪提交到服务器，Vue3中实现选取头像并裁剪，Vue3实现用户自定义上传头像裁剪，图片上传及裁剪功能，vue3有什么图片裁切组件，vue3图片上传后裁切成圆形，vue3如何实现图片上传后裁剪功能，图片裁剪插件，选择图片裁剪设置用户头像，图片的上传和裁剪，详细教程，无法上传，报错，裁剪后数据不对，模糊，不清楚
vue3 - element-plus 实现图片上传到服务器及预览、删除功能，支持显示进度条、上传失败错误占位的超好用的图像上传组件（详细运行示例及完整组件源码，一键复制开箱即用）
高级前端工程师
05-09 6309
vue3图片上传组件，vue3+elementUI实现上传图片，vue3 + elementPlus 上传图片带预览和删除和进度条，vue3实现图片上传功能，vue3 项目中 element plus 上传组件详细使用教程，Vue3使用element的el-upload上传图片文件，vue3图片上传到服务器并可预览和删除功能示例，vue3使用element-plus中的文件/图片上传功能，vue3 element plus 上传进度条示例教程，element plus上传头像组件，element plus
vue3 - ant design vue 抽屉弹框组件 a-drawer 拖曳侧边修改宽度功能，让Drawer抽屉框可以拖拽边缘动态修改宽度效果，vue3+antd3如何让抽屉组件变成可拖动百分比宽
高级前端工程师
07-25 2298
vue3，ant design vue，antd，抽屉弹框，a-drawer，抽屉组件Drawer，可拖动的抽屉，拖曳，拖拽，按住侧边进行左右拖动改变宽度，鼠标按下拖曳拖拽拖动，动态改变宽度，vue3+antd3如何将drawer抽屉弹框修改成可以左右拖动动态修改宽度，抽屉弹框可拖曳动态调整宽度，可调整大小的抽屉组件，可拖拉宽度抽屉，添加可拖动侧边栏宽度的功能，拖曳改变宽度，抽屉Drawer组件实现鼠标拖拽控制宽度，antd实现宽度拖拽，实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围，鼠标拖拽的
vue - 【让一张图片可以拖动】鼠标点击拖曳拖拽图片及鼠标滚轮放大缩小功能实现，让一张图片图像在页面内可以任意拖动拖曳及鼠标滚轮可以缩放控制大小功能效果（完整实例源码，一键复制开箱即用！）
高级前端工程师
08-02 2416
vue图片拖拽及鼠标滚轮放大缩小效果，vue实现图片放大缩小及拖拽，vue项目实现图片缩放与拖拽功能，vue如何实现图片放大缩小拖拽，vue实现图片拖拽及鼠标滚轮放大缩小，vue图像拖拽,鼠标滚轮放大缩小，基于vue图片拖拽放大缩小，vue实现拖着一张图片走的效果，vue怎么让一张图片可以拖动，vue网页使图片图像可以用鼠标拖动，vue鼠标在图片上的时候怎么用滚轮缩放图片大小，vue 图片拖拽和滚轮缩放，vue组件实现图片的拖拽和缩放，Vue2实现图片的拖拽,缩放和旋转效果的示例代码，vue 图像拖拽、鼠标
vue3 - 实现给图片加入水印效果，支持给图像自定义水印文字、大小、排列方式、放大预览等（附带详细运行示例，无任何第三方插件一键复制运行查看效果）详细的代码及注释！
高级前端工程师
05-09 4004
vue3图片水印，vue3图像加水印效果并且能预览，vue3给图像图片设置水印，vue3图片列表添加水印，vue3给图片加上水印，vue3如何给图像增加水印效果，在vue3项目中怎么让图片带上水印，vue3给图片加水印，vue3+ts实现给图片增加水印，vue3 图片添加水印好用的插件有哪些，vue3中添加文字或图片水印，Vue3实现页面添加水印功能，vue3如何实现上传图片添加水印，vue3 图片添加水印，Vue3 中给图片添加时间水印，vue3怎么加图案水印，vue3给超多图片一键加入水印，vue3 项
vue实现鼠标拖拽div滚动效果-vue-dragscroll（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
06-11 3329
vue实现鼠标拖拽div滚动效果-vue-dragscroll
Vue - 实现垂直菜单分类栏目，鼠标移入后右侧出现悬浮二级菜单容器效果（完整示例源码，详细代码注释，一键复制开箱即用）
王佳斌
04-20 4635
vue css 垂直侧边栏，vue 竖向菜单示例代码，css vue实现垂直分类菜单，vue 实现css竖向菜单分类并且鼠标移入后显示二级菜单详细示例源码，vue实现鼠标移过出现下拉二级菜单功能，用Vue怎么实现鼠标滑过一级导航,显示二级菜单，vue鼠标移入父级菜单显示二级菜单，CSS 鼠标移入悬停后右侧显示二级菜单，vue css 输入移入分类菜单后右侧显示二级菜单，vue css 竖向菜单分类, 鼠标移入右侧显示更多分类，vue点击左侧菜单右侧显示内容，vue实现左侧导航，鼠标点击或移入时显示右侧多级菜
vue3+element-plus - 最新详细实现将表格Table组件 “所见所得导出“ 为excel(xls/xlsx)电子表格文件，表格中的图片图像、图标等媒体资源完美导出显示（详细示例代码）
高级前端工程师
07-22 3792
vue3，nuxt3，element plus，表格组件，Table，el-table，导出，下载，excel，电子工作簿，xls，xlsx，将表格导出成xls，如何把表格原封不动的导出成excel，保留图片，带图片，图标，如何导出包括含有图片的Excel表格，图片和表格数据导出excel，把表格导出成excel格式，表格内的图片一起导出，vue3导出图片和数据到Excel，可导出图片，导出图像到Excel，网页上的图片怎么能导出到xls表格中，显示图片url链接，图片太多导出失败，图片会超出单元格，图片不
vue3-draggable-resizable:[Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线
05-08
Vue3DraggableResizable[Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线。[ Vue3 Component ] Draggable and resizable component for vue3, and, support element ...
vue实现div可拖动位置也可改变盒子大小的原理
10-14
在Vue中实现一个div元素既可以拖动改变位置，又可以调整大小的功能，涉及到的核心技术包括事件监听、CSS定位以及DOM操作。下面将详细介绍实现这一功能的步骤和原理。 首先，我们需要监听鼠标事件来处理拖动和改变...
vue自定义指令-实现div和图片的拖拽，放大，缩小
06-20
vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用
基于Vue实现图片在指定区域内移动的思路详解
10-17
在`mousemove`事件处理函数中，我们计算鼠标相对于拖动开始时的偏移量，并将这个偏移量应用到图片容器的`left`和`top`样式属性上，从而实现图片的移动。同时，我们需要确保图片不会超出显示区域的边界，所以需要检查...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并...
【浏览器插件】智译网页翻译 自动翻译 双语对照 AI对话.zip
08-21
智译网页翻译插件，由新译科技精心打造，是一款智能化的网页翻译利器。当您浏览网页时，它能够自动识别页面语言，并迅速将其翻译成您预设的目标语言。支持双语对照、自动翻译、划词翻译，让您在浏览外文网站时，信息一目了然。 AI助手LangGPT的加入，让智译更进一步。它不仅能自动总结页面内容，还能与您自由对话，高效便捷地获取所需信息。智译支持包括英语、俄语、德语、法语、西班牙语等在内的十数种语言与中文的互译，无论是欧美语言还是亚洲语言，甚至是少数民族语言，都能轻松应对。 无论是查阅资料、浏览新闻还是在线购物，智译都能助您一臂之力，节省时间，提升效率。使用起来也非常简单： 1. 自动翻译的开启与关闭：在设置页面，选择“自动翻译为”选项，即可在打开网页时自动翻译。若不需要自动翻译，关闭此选项即可，也可以点击右下角功能条上的“译”按钮手动翻译。 2. 双语对照翻译的开启与关闭：在设置页面，打开“双语对照模式”，新开或刷新页面后，翻译触发，页面将同时展示原文与译文。点击智译图标可切换查看模式，还可以自定义显示样式。 3. 划词翻译的开启与关闭：在设置页面，启用“启动划词翻译”，即可在页面上划选
毕业设计，基于SpringBoot+Vue+MySQL开发的公寓报修管理系统，源码+数据库+毕业论文+视频演示
08-21
毕业设计，基于SpringBoot+Vue+MySQL开发的公寓报修管理系统，源码+数据库+毕业论文+视频演示 现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本公寓报修管理系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此公寓报修管理系统利用当下成熟完善的Spring Boot框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的MySQL数据库进行程序开发。公寓报修管理系统有管理员，住户，维修人员。管理员可以管理住户信息和维修人员信息，可以审核维修人员的请假信息，住户可以申请维修，可以对维修结果评价，维修人员负责住户提交的维修信息，也可以请假。公寓报修管理系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。 关键词：公寓报修管理系统；Spring Boot框架；MySQL；自动化；VUE
批量flac转mp3脚本
最新发布
08-21
可以批量将.flac音频文件转换成mp3格式，高效快捷 1、将下载的flac文件放到flac目录下 2、双击flac2mp3.bat 3、等转码完成，到mp3目录下查看即可
【浏览器插件】Ctool程序开发常用工具.zip
08-21
【浏览器插件-Ctool：程序开发常用工具】 ### 功能概览 以下是Ctool插件提供的功能列表，每个功能都支持离线使用，以满足开发者在不同环境下的需求。 | 功能分类 | 支持功能 | 离线使用 | |-----------|-----------|-----------| | **哈希** | `md5`, `sha1`, `sha256`, `sha512`, `sm3`, 支持批量处理及文件哈希计算 | √ | | **加密/解密** | `AES`, `DES`, `RC4`, `Rabbit`, `TripleDes`, `sm2`, `sm4` | √ | | **BASE64编码** | 加密、解密，支持文件操作 | √ | | **URL编码** | 编码、解码 | √ | | **时间** | 时间戳转换、毫秒处理、时区转换、时间计算器 | √ | | **二维码** | 生成、解析 | √ | | **条形码** | 生成 | √ | | **汉字转拼音** | 支持声调、首字母、分隔符 | √ | | **IP地址查询** | 运营商、城市信息查询（不支
vue3 实现拖动元素 到指定容器内 然后可以拖回原来位置
05-23
你可以使用 Vue3 内置的 `draggable` 指令来实现拖动元素，并且结合 `droppable` 指令来实现拖动元素到指定容器内。 以下是一个简单的示例： ```html <template> <div class="container"> <div class="drag-area" v-draggable> Drag me! </div> <div class="drop-area" v-droppable> Drop here! </div> </div> </template> <script> export default { directives: { draggable: { mounted(el) { let isDragging = false; let originalX, originalY; el.addEventListener("mousedown", function(event) { isDragging = true; originalX = event.clientX; originalY = event.clientY; el.style.cursor = "grabbing"; }); el.addEventListener("mousemove", function(event) { if (isDragging) { const deltaX = event.clientX - originalX; const deltaY = event.clientY - originalY; el.style.transform = `translate(${deltaX}px, ${deltaY}px)`; } }); el.addEventListener("mouseup", function() { isDragging = false; el.style.cursor = "grab"; el.style.transform = ""; }); } }, droppable: { mounted(el) { el.addEventListener("dragover", function(event) { event.preventDefault(); el.style.backgroundColor = "yellow"; }); el.addEventListener("dragleave", function() { el.style.backgroundColor = ""; }); el.addEventListener("drop", function(event) { event.preventDefault(); const draggedElement = document.querySelector(".drag-area"); el.appendChild(draggedElement); el.style.backgroundColor = ""; }); } } } } </script> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .drag-area { display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; background-color: #efefef; border: 1px solid #ccc; cursor: grab; } .drop-area { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background-color: #eee; border: 1px dashed #ccc; } </style> ``` 在上面的代码中，我们定义了两个指令 `v-draggable` 和 `v-droppable`，分别用于实现元素的拖动和容器的放置。在 `v-draggable` 指令中，我们监听鼠标事件来实现元素的拖动，同时设置了 `cursor` 样式来改变鼠标指针的形状。在 `v-droppable` 指令中，我们监听了三个事件来实现容器的放置：`dragover`、`dragleave` 和 `drop`。其中 `dragover` 和 `dragleave` 用于设置容器的背景颜色，以提示用户当前的操作状态；`drop` 事件中我们将拖动元素添加到容器中，并清除容器的背景颜色。 注意：以上示例只是一个简单的实现，还有很多细节需要考虑，比如拖动元素时的边界限制、容器内元素的排序等问题。如果需要更复杂的功能，建议使用第三方库来实现，比如 `vuedraggable`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值