vue - 【让一张图片可以拖动】鼠标点击拖曳拖拽图片及鼠标滚轮放大缩小功能实现，让一张图片图像在页面内可以任意拖动拖曳及鼠标滚轮可以缩放控制大小功能效果（完整实例源码，一键复制开箱即用！）

已于 2024-09-12 15:45:02 修改
阅读量2.6k 收藏 4
点赞数 3
分类专栏： 前端组件与功能(开箱即用) 文章标签： vue网页pc项目详细教程 vue.js 图片拖曳图像拖拽 vue实现鼠标拖动图片功能实例 vue实现可以用鼠标拖着图片走 vue用鼠标滚动控制图片大小 vue图像图片用鼠标拖拽走 图片图像缩放及拖曳插件组件
于 2023-08-02 16:13:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/132064794
版权
本文展示了在Vue项目中如何实现图片的拖曳拖拽以及使用鼠标滚轮进行放大缩小的功能。提供了完整源码，适用于网页PC项目，支持一键复制，开箱即用。
摘要由CSDN通过智能技术生成

效果图

在vue网页h5项目开发中，实现一个图片图像可用鼠标拖曳拖拽位置，并且用鼠标滚轮可以放大缩小图片。

一键复制代码，开箱即用。

在这里插入图片描述

完整源码

找个页面，复制粘贴。

<template>
了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
vue_upload图片上传支持拖拽
10-26
vue_upload图片上传支持拖拽，vue_upload图片上传支持拖
Vue.js实现图片的随意拖动方法
10-18
下面小编就为大家分享一篇Vue.js实现图片的随意拖动方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3项目中使用sortablejs实现图片拖拽排序
jyl4855的博客
08-22 252
库初始化拖拽排序功能，使得图片和视频列表可以通过拖拽来重新排序。引入sortablejs。3、 钩子用于在组件挂载。后初始化拖拽排序功能。
基于vue-simplemde实现图片拖拽、粘贴功能
08-27
主要介绍了基于vue-simplemde实现图片拖拽、粘贴功能,需要的朋友可以参考下
vue自定义指令-实现div和图片的拖拽，放大，缩小
06-20
vue自定义指令--实现div和图片的拖拽，放大，缩小，已封装成组件，下来导入后可直接使用
vue - 实现图片拖拽效果
sunshime的博客
07-31 4425
1.安装依赖包 npm install awe-dnd --save 2.main.js文件（全局）引入 // 拖拽 import VueDND from 'awe-dnd'; Vue.use(VueDND); 3.在使用图片拖拽的页面对应的循环的标签加上以下代码： v-dragging="{ item: item, list: masterImgList, group: 'index' }...
vue实现图片放大缩小及拖拽
weixin_56341412的博客
07-03 6405
vue实现图片放大缩小及拖拽
Vue 实现图片拖拽功能
vanora1111的博客
03-28 3024
原理：现有一个图片的列表，拖动其中一个图片（触发dragstart），当拖动的图片移动到其他图片的位置（触发dragover），则将拖动的图片从原位置移动到该位置（触发dragend）。dragover：当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件(每几百毫秒触发一次)。dragstart：当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发（我这里没有用）。随意拖动一张图到另外一个图片上面时，两张图片交换位置。
vue实现 图片拖拽及鼠标滚轮放大缩小
weixin_45730243的博客
08-01 1539
vue实现 图片拖拽及鼠标滚轮放大缩小。
关于vue使用vue-draggable实现图片拖拽效果（项目中使用简单描述）
m0_60602811的博客
09-29 1812
关于vue使用draggable实现图片拖拽效果
Vue中实现滚轮滑动放大图片并可进行拖动
yhlhelloworld的博客
04-19 743
组件（子组件改为自己的路径和名称）
vue3 - 实现图片放大缩小和拖曳拖动功能，鼠标移入图像可拖曳移动，鼠标移入图像时滚轮放大缩小功能（vue3网页项目让图片支持鼠标拖动和滚轮放大缩小详细教程，提供完整示例源码，一键复制开箱即用！）
高级前端工程师
12-11 4468
vue3，vue3图片鼠标滚轮放大缩小，vue3图像拖曳拖动，vue3如何实现鼠标拖动图片移动，实现div和图片的拖拽放大缩小，vue3图片图像鼠标可拖动且缩小放大效果，vue3让div容器图片可拖动，图片怎么可鼠标滚轮放大，图像如何支持鼠标拖动和滚轮放大缩小，vue3中实现图片拖拽，vue3实现图片的放大缩小(以鼠标位置为中心放大缩小)以及拖拽功能，图片缩放，实现图片的随意拖动方法，实现用鼠标让图片放大缩小拖拽，vue3鼠标拖动图像 放大缩小，图像滚轮缩放和拖拽，vue3项目中鼠标滚轮缩放图片大小和拖拽效
Vue3 - 详细实现图片预览功能，点击图像、按钮事件触发图像预览效果，支持单个图片或多个图片轮播切换预览，类似相册预览效果，图片查看器功能（图片可旋转翻转、滚轮放大缩小、拖曳拖拽图片、修改遮罩背景色
王佳斌
02-23 3085
vue3，图片预览，图像预览，vue3预览图片，vue3预览图像，vue3相册预览，图片查看器功能，预览图片，怎么预览多个图片并且可以切换，vue3最好用的图片预览插件，vue3网站pc好用的图片预览插件，vue3实现图片预览组件，vue3项目实现预览图片、旋转图片功能，vue3中使用viewerjs实现图片预览效果，vue3电脑网页怎么预览图片图像，图片预览组件，vue3项目中如何实现图片组预览查看，弹框放大显示图片并居中预览，在Vue3项目中实现图片的在线预览，实现通过点击按钮来触发图片预览功能，在vu
vue3 - 详细实现鼠标按住后拖动图片到指定位置并自动贴合吸附盒子容器，左边和右边分别设置好容器将图像拖拽到任意位置，左右来回拖动放置图片，vue实现让图片可以拖拽交换位置，图片在两个盒子里互换位置
高级前端工程师
08-22 3978
vue3，nuxt3，图片来回拖曳，图片左右交替，替换，图像，鼠标按住拖动图片，vue 图像图片拖曳，图片拖拽，让一张图片可以拖动，图标icon，img图像，一张图片从左边拖到右边，在一个容器范围内自由拖拽图片，基于vue3实现图片拖拽功能_vue3实现图片拖拽，详细示例代码教程，vue3拖拽互换位置，拖拽交换两个节点的位置，vue3来回拖拽放置图片，图片拖拽交换位置，vue3实现拖拽元素互换位置，拖动容器互换位置，vue3实现拖拽图片切换图片位置，拖拽组件，拖曳插件，如何让图片在两个dom盒子里互换位置，
vue2 - 详细实现鼠标按住后拖动图片到指定位置并自动贴合吸附盒子容器，左边和右边分别设置好容器将图像拖拽到任意位置，左右来回拖动放置图片，vue实现让图片可以拖拽交换位置，图片在两个盒子里互换位置
最新发布
高级前端工程师
08-22 3839
vue2，nuxt2，图片来回拖曳，图片左右交替，替换，图像，vue2来回拖拽放置图片，图片拖拽交换位置，vue实现拖拽元素互换位置，拖动容器互换位置，vue实现拖拽图片切换图片位置，拖拽组件，拖曳插件，如何让图片在两个dom盒子里互换位置，鼠标按住拖动图片，vue图像图片拖曳，图片拖拽，让一张图片可以拖动，图标icon，img图像，一张图片从左边拖到右边，在一个容器范围内自由拖拽图片，基于vue2实现图片拖拽功能_vue实现图片拖拽，详细示例代码教程，vue拖拽互换位置，拖拽交换两个节点的位置，vue2实
vue图片放大缩小拖拽，缩略图相应展示页面视口图片内容
Ann_52547的博客
08-12 626
cavas实现，大致😒写了一半，主要问题就是模糊需要处理，后边没写了，有大神改改的话请@我抄抄，在此谢过了🙏。（2）每次拖拽大图需要重新绘制相应小图的内容到大图展示上，每次canvas重新绘制会模糊，这块没写。（3）小图展示的是1080*1920等比10倍缩小的，根据实际情况可以改为视口等比缩小。（1）代码mark框初始状态应该是框起来一整个小图，我没改。（4）大图和小图模糊处理可以通过以下代码处理。showImg.vue代码，就一个文件。实现的也不是很好，比较垃圾。
vue3【实战】来回拖拽放置图片
朝阳39的博客
07-05 706
【代码】vue3【实战】来回拖拽放置图片。
vue3 图片放大缩小、拖拽功能（自定义指令）
HHH917的博客
12-28 4987
const oDiv = el // 当前元素 const minTop = oDiv . getAttribute("drag-min-top") const ifMoveSizeArea = 20 oDiv . onmousedown =(e) => {
基于VUE实现相册图片拖拽
weixin_34107955的博客
01-10 2134
2019独角兽企业重金招聘Python工程师标准>>> ...
vue3中如何使点击后的图片可以过鼠标滚轮来实现放大和缩小
05-17
可以通过以下步骤来实现： 1. 首先，在Vue3中引入一个图片组件，在该组件中设置图片的样式和初始大小。 2. 在该组件中添加一个点击事件，将该事件绑定到图片上。当用户点击图片时，会触发该事件。 3. 在该点击事件中，使用Vue3的$refs属性获取到该图片元素，并为其添加鼠标滚轮事件监听器。 4. 在鼠标滚轮事件监听器中，根据鼠标滚轮的方向来判断是放大还是缩小。可以使用transform属性来实现图片的缩放。 下面是一个示例代码： ``` <template> <div> <img ref="image" src="./image.png" @click="onClick" /> </div> </template> <script> export default { methods: { onClick() { const img = this.$refs.image; img.addEventListener("wheel", this.onWheel); }, onWheel(event) { const img = this.$refs.image; const delta = Math.sign(event.deltaY); const scale = delta > 0 ? 1.1 : 0.9; img.style.transform = `scale(${scale})`; }, }, }; </script> <style> img { width: 200px; height: 200px; } </style> ``` 在这个示例代码中，当用户点击图片时，会触发onClick方法。在该方法中，使用$refs属性获取到图片元素，并为其添加鼠标滚轮事件监听器。 在鼠标滚轮事件监听器中，根据鼠标滚轮的方向来判断是放大还是缩小，并使用transform属性来实现图片的缩放。这里使用了Math.sign方法来判断鼠标滚轮的方向，如果deltaY是正数，则表示鼠标向上滚动，需要放大图片；如果deltaY是负数，则表示鼠标向下滚动，需要缩小图片。 最后，还需要在样式中设置图片的初始大小。在这个示例代码中，图片的初始大小为200px*200px。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值