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>
了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
Vue3 - 详细实现图片预览功能，点击图像、按钮事件触发图像预览效果，支持单个图片或多个图片轮播切换预览，类似相册预览效果，图片查看器功能（图片可旋转翻转、滚轮放大缩小、拖曳拖拽图片、修改遮罩背景色
王佳斌
02-23 3382
vue3，图片预览，图像预览，vue3预览图片，vue3预览图像，vue3相册预览，图片查看器功能，预览图片，怎么预览多个图片并且可以切换，vue3最好用的图片预览插件，vue3网站pc好用的图片预览插件，vue3实现图片预览组件，vue3项目实现预览图片、旋转图片功能，vue3中使用viewerjs实现图片预览效果，vue3电脑网页怎么预览图片图像，图片预览组件，vue3项目中如何实现图片组预览查看，弹框放大显示图片并居中预览，在Vue3项目中实现图片的在线预览，实现通过点击按钮来触发图片预览功能，在vu
vue3 - 实现图片放大缩小和拖曳拖动功能，鼠标移入图像可拖曳移动，鼠标移入图像时滚轮放大缩小功能（vue3网页项目让图片支持鼠标拖动和滚轮放大缩小详细教程，提供完整示例源码，一键复制开箱即用！）
高级前端工程师
12-11 4585
vue3，vue3图片鼠标滚轮放大缩小，vue3图像拖曳拖动，vue3如何实现鼠标拖动图片移动，实现div和图片的拖拽放大缩小，vue3图片图像鼠标可拖动且缩小放大效果，vue3让div容器图片可拖动，图片怎么可鼠标滚轮放大，图像如何支持鼠标拖动和滚轮放大缩小，vue3中实现图片拖拽，vue3实现图片的放大缩小(以鼠标位置为中心放大缩小)以及拖拽功能，图片缩放，实现图片的随意拖动方法，实现用鼠标让图片放大缩小拖拽，vue3鼠标拖动图像 放大缩小，图像滚轮缩放和拖拽，vue3项目中鼠标滚轮缩放图片大小和拖拽效
vue插件draggable实现拖拽移动图片顺序
10-17
主要为大家详细介绍了vue插件draggable实现拖拽移动图片顺序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3 图片放大缩小、拖拽功能（自定义指令）
HHH917的博客
12-28 5116
const oDiv = el // 当前元素 const minTop = oDiv . getAttribute("drag-min-top") const ifMoveSizeArea = 20 oDiv . onmousedown =(e) => {
vue.js 原生js app端实现图片旋转、放大、缩小、拖拽
记录常见的问题以及解决办法
09-27 844
vue.js 原生js app端实现图片旋转、放大、缩小、拖拽
vue - 实现图片拖拽效果
sunshime的博客
07-31 4455
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 实现图片拖拽功能
vanora1111的博客
03-28 3197
原理：现有一个图片的列表，拖动其中一个图片（触发dragstart），当拖动的图片移动到其他图片的位置（触发dragover），则将拖动的图片从原位置移动到该位置（触发dragend）。dragover：当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件(每几百毫秒触发一次)。dragstart：当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发（我这里没有用）。随意拖动一张图到另外一个图片上面时，两张图片交换位置。
vue实现图片放大缩小及拖拽
weixin_56341412的博客
07-03 6593
vue实现图片放大缩小及拖拽
Vue.js实现图片的随意拖动方法
10-18
下面小编就为大家分享一篇Vue.js实现图片的随意拖动方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现 图片拖拽及鼠标滚轮放大缩小
weixin_45730243的博客
08-01 1569
vue实现 图片拖拽及鼠标滚轮放大缩小。
vue3 - 详细实现鼠标按住后拖动图片到指定位置并自动贴合吸附盒子容器，左边和右边分别设置好容器将图像拖拽到任意位置，左右来回拖动放置图片，vue实现让图片可以拖拽交换位置，图片在两个盒子里互换位置
高级前端工程师
08-22 4076
vue3，nuxt3，图片来回拖曳，图片左右交替，替换，图像，鼠标按住拖动图片，vue 图像图片拖曳，图片拖拽，让一张图片可以拖动，图标icon，img图像，一张图片从左边拖到右边，在一个容器范围内自由拖拽图片，基于vue3实现图片拖拽功能_vue3实现图片拖拽，详细示例代码教程，vue3拖拽互换位置，拖拽交换两个节点的位置，vue3来回拖拽放置图片，图片拖拽交换位置，vue3实现拖拽元素互换位置，拖动容器互换位置，vue3实现拖拽图片切换图片位置，拖拽组件，拖曳插件，如何让图片在两个dom盒子里互换位置，
vue_upload图片上传支持拖拽
10-26
vue_upload图片上传支持拖拽，vue_upload图片上传支持拖
vue2 - 详细实现鼠标按住后拖动图片到指定位置并自动贴合吸附盒子容器，左边和右边分别设置好容器将图像拖拽到任意位置，左右来回拖动放置图片，vue实现让图片可以拖拽交换位置，图片在两个盒子里互换位置
高级前端工程师
08-22 3896
vue2，nuxt2，图片来回拖曳，图片左右交替，替换，图像，vue2来回拖拽放置图片，图片拖拽交换位置，vue实现拖拽元素互换位置，拖动容器互换位置，vue实现拖拽图片切换图片位置，拖拽组件，拖曳插件，如何让图片在两个dom盒子里互换位置，鼠标按住拖动图片，vue图像图片拖曳，图片拖拽，让一张图片可以拖动，图标icon，img图像，一张图片从左边拖到右边，在一个容器范围内自由拖拽图片，基于vue2实现图片拖拽功能_vue实现图片拖拽，详细示例代码教程，vue拖拽互换位置，拖拽交换两个节点的位置，vue2实
关于vue使用vue-draggable实现图片拖拽效果（项目中使用简单描述）
m0_60602811的博客
09-29 1835
关于vue使用draggable实现图片拖拽效果
基于vue实现图片拖拽功能
柯基的博客
11-08 2850
主要涉及到的元素知识，示意图： js代码部分： directives: { drag: { // 指令的定义 bind: function(el) { // 获取当前元素 let oDiv = el; oDiv.onmousedown = (e) => { // 算出鼠标相对元素的位置 let disX = e.clientX - oDiv.offsetLeft; .
基于VUE实现相册图片拖拽
weixin_34107955的博客
01-10 2141
2019独角兽企业重金招聘Python工程师标准>>> ...
vue图片拖拽
chuanxie4368的博客
03-27 1187
第一步，执行cnpm install vuedraggable -S，安装vuedraggable插件； 第二步，在vue文件里引入插件：import draggable from 'vuedraggable'; 第三步，在components组件里定义draggable; 第四步，具...
vue实现图片拖动排序并可上传图片
qq_42740298的博客
05-04 1035
vue实现图片拖动排序并可上传图片
利用vue组件实现图片的拖拽和缩放功能
weixin_45952434的博客
08-26 1486
vue组件实现图片的拖拽缩放
vue2 对一张图片滚轮放大缩小，拖拽，图片可以恢复原来大小，代码怎么写
最新发布
10-22
在 Vue.js 中，你可以使用 Vue 的组件化思想和一些库如Vue-Draggable、vue-zoom 图片缩放插件来实现图片的滚动放大缩小、拖拽功能，并保持原始大小。以下是一个简单的示例： 首先，你需要安装必要的库，比如 `vue-zoom` 和 `vue-draggable`。在项目中通过npm或yarn安装： ```bash npm install vue-zoom vue-draggable # 或者 yarn add vue-zoom vue-draggable ``` 然后，在组件里导入并使用这两个库： ```html <template> <div class="image-container"> <img :src="imageUrl" ref="zoomImage" @mousedown="startDrag" /> <div v-if="isDragging" class="draggable-image" draggable> <vue-zoom :zoomable="true" @zoom-end="resetZoom" :zoom="zoomScale"> <img :src="scaledImageUrl" /> </vue-zoom> </div> </div> </template> <script> import { Zoom } from 'vue-zoom' import draggable from 'vuedraggable' export default { components: { Zoom, draggable }, data() { return { imageUrl: '', zoomScale: 1, isDragging: false, scaledImageUrl: '' } }, methods: { startDrag(e) { this.isDragging = true const img = this.$refs.zoomImage if (img && e.target === img) { this.scaledImageUrl = this.imageUrl } }, resetZoom() { this.zoomScale = 1 this.scaledImageUrl = this.imageUrl this.isDragging = false } } } </script> <style scoped> .image-container { position: relative; } .draggable-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: move; } .vue-zoom { pointer-events: none; } </style> ``` 这个示例中，我们首先给图片添加了 mousedown 事件监听器来开始拖动。当用户开始拖动时，我们记录下原始图片URL，然后隐藏原图显示缩放后的图片。`vue-zoom` 模块负责图像的放大缩小，而 `draggable` 则实现了图片的拖拽。当你释放鼠标时，`@zoom-end` 触发 `resetZoom` 方法，将图片恢复到原始大小。 注意：这只是一个基本示例，实际应用可能需要处理更多边界情况和交互细节，比如防止图片超出容器范围等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值