- 综合排序
- 最热优先
- 最新优先
- JavaScript charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>拖拽缩放 拖拽缩放示例（逻辑/数据/展现分离）</h2>来自专栏前端 TS/JS 核心讲堂
js拖拽-javascript拖拽缩放示例
本文将系统讲解 原生 JavaScript 实现拖拽功能的核心原理、完整代码示例、常见问题及高级技巧。 ❌ 移动端兼容性差方式 2：基于 mousedown mousemove mouseup 的自定义拖拽（推荐用于 UI 组件内部拖拽）✅ 完全可控，性能高✅ 可精细控制动画、边界、吸附等效果✅ 兼容性极佳 move; position: absolute; top: 100px; left: 100px; ">
14521编辑于 2026-04-01 - 来自专栏向治洪
图片缩放，拖拽等操作
跟系统图库的效果一样哦，先贴一张美女图片，听说有美女，男人就会多看一眼，不知道是不是真的，哈哈 布局文件需要注意的一点是 scaleType一定要是 matrix，这样才能对图片进行一系列的矩阵操作，例如放大缩小，拖拽 = 2; /** 当前模式*/ int mode = NONE; PointF prev = new PointF(); PointF mid = new PointF } if (p[0] > MAX_SCALE) { //Log.d("", "当前缩放级别:"+p[0]+",最大缩放级别:"+MAX_SCALE); matrix.set = dm.widthPixels; if (width < screenWidth) { deltaX = (screenWidth - width) / 2 y / 2); } } 欢迎下载代码下载
2.8K60发布于 2018-01-29 - 来自专栏大前端（横向跨端 & 纵向全栈）
JQuery实现图片拖拽缩放特效
给大家分享一个基于JQuery实现的图片拖拽缩放特效，效果如下： 实现代码如下，欢迎大家复制粘贴。 <! head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>基于JQuery实现的图片拖拽缩放特效
10.8K10编辑于 2022-11-27 - 来自专栏大前端（横向跨端 & 纵向全栈）
原生JS实现拖拽缩放元素
今天给大家分享一个用原生JS实现的拖拽缩放元素大小的Demo，效果如下： 以下是代码实现，欢迎大家复制粘贴及吐槽。 <! <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现拖拽缩放元素 bottom: 0; right: 0; cursor: nw-resize; } #div2 = document.getElementById('div2'); oDiv.onmousedown = function (ev) { var style.width = oEvent.clientX - disX + oDiv.offsetWidth + 'px'; oDiv2.style.height
6.9K20发布于 2020-11-26 - 来自专栏Android技术分享
Flutter 可以缩放拖拽的图片
主要功能： 缩放拖拽 在PageView里面缩放拖拽 支持缩放拖拽 ? 缩放动画最大值，当缩放结束时回到maxScale值 maxScale * 1.2 speed 缩放拖拽速度，与用户操作成正比 1.0 inertialSpeed 拖拽惯性速度，与惯性速度成正比 100 让缩放的过程看起来流畅 1.根据缩放点相对图片的位置对缩放点作为中心点进行缩放 2.如果Scale小于等于1.0的时候，按照图片的中心点进行缩放的，而当大于1.0并且图片已经铺满区域的时候按照1来执行 3.当图片是那种长宽相差很大的时候，进行缩放的时候，将首先沿着比较长的那边进行中心点缩放，直到图片铺满区域之后，按照1来执行 4.当进行缩放操作的时候，不进行移动操作 1，2，3对应代码 Offset = null) { return _center; } 在PageView里面缩放拖拽 ?
5.4K00发布于 2019-04-18 - 来自专栏大前端（横向跨端 & 纵向全栈）
基于JQuery实现的图片拖拽缩放特效
给大家分享一个基于JQuery实现的图片拖拽缩放特效，效果如下： 实现代码如下，欢迎大家复制粘贴。 <! head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>基于JQuery实现的图片拖拽缩放特效
6.6K00发布于 2020-11-26 - 来自专栏前端开发随笔
Vue3实现图片滚轮缩放和拖拽
transform.split("(")[1].split(")")[0] : 1 zoom += e.wheelDelta / 1200 if (zoom > 0.1 && zoom < 2)
3.2K30编辑于 2021-12-28 - 来自专栏娱乐心理测试
小程序的拖拽、缩放和旋转手势
.pageY * 2 twoPoint.x2 = e.touches[1].pageX * 2 twoPoint.y2 = e.touches[1].pageY * 2 ].pageY * 2 twoPoint.x2 = e.touches[1].pageX * 2 twoPoint.y2 = e.touches[1].pageY * 2 rotate: that.data.rotate + (curAngle - perAngle) }) }else { // 计算距离，缩放 - preTwoPoint.y2), 2)) var curDistance = Math.sqrt(Math.pow((twoPoint.x1 - twoPoint.x2), 2) + Math.pow((twoPoint.y1 - twoPoint.y2), 2)) that.setData({ msg: '缩放', scale
1.7K40发布于 2018-06-08 - 来自专栏桑榆肖物
一款简单的缩放拖拽图片控件
本文介绍一个针对 .NET 桌面应用程序的独立图片缩放拖拽显示控件 SQPhoto[1]。 基于 PictureBox 的图片展示工具，增加了拖动和缩放功能，便于在某些场景下的图片展示，比如我前面开发的 Snipping_OCR[2] 工具就使用了这个组件。 Snipping_OCR 该用户组件采用 Panel 和 PictureBox 组合的方式，控制 PictureBox 在 Panel 容器中显示的位置和大小来实现拖拽和放大缩小的功能。 _ZoomCenter) return; PicBox.Location = new Point((this.Width - PicBox.Width) / 2, (this.Height - : https://www.nuget.org/packages/SQPhoto/ [2] Snipping_OCR: https://github.com/sangyuxiaowu/Snipping_OCR
1.3K40编辑于 2022-11-18 - 来自专栏前端壹栈
JavaScript进阶之实现拖拽
之前我们来实现原生拖拽 原生实现拖拽 Mouse事件实现拖拽 在h5之前，原生实现拖拽是根据Mouse事件来实现的，需要用到以下这三个事件mousedown,mouseup,mousemove mousedown JavaScript三大家族 ? ? 明白了上述?三个事件方法的作用以及JavaScript三大家族，我们来实现个简单版的拖拽 <! selected = e.target; console.log(selected) } function isBefore(el1, el2) { var cur; if (el2.parentNode === el1.parentNode) { for (cur = el1.previousSibling ; cur; cur = cur.previousSibling) { if (cur === el2) return true; } } else
3.2K40发布于 2021-01-08 - 来自专栏前端 TS/JS 核心讲堂
原生JavaScript拖拽代码示例
其中，通过拖拽直接交换单元格内容是一种直观、高效的操作方式，广泛应用于课程表编排、任务看板、配置管理等场景。 本文将详细介绍如何使用 纯原生 JavaScript（无任何框架依赖） 实现一个支持单元格拖拽交换的 HTML 表格，并提供完整可运行的源代码。
单元格均可拖动；拖影层（Helper Layer）：一个绝对定位的 ，作为被拖单元格的视觉副本，跟随鼠标移动；状态管理：记录当前拖拽源、原始内容、偏移量及目标单元格；视觉反馈：拖拽源高亮为淡紫色 2. 拖影定位通过 getBoundingClientRect() 获取源单元格尺寸，结合鼠标偏移量（offsetX/Y），精确计算拖影位置，实现“所见即所得”的跟随效果。3. height: 32px; font-weight: bold; background-color: #ccc; border-bottom: 2px11721编辑于 2026-04-01来自专栏趣谈前端轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报
由于我们的技术栈采用的是 React, 目前还没有一个成熟库可以同时支持自由拖拽和缩放, 我们不得不用 react-dragable 和 react-resiable两个库来实现拖拽和缩放, 但是这样我们要维护的数据结构就相当复杂了 我们从可视化搭建平台的实际业务出发, 可以分析出拖拽缩放有如下几个功能点: 自由拖拽 支持控制点, 多方位缩放 支持自由控制层级 支持组件静态化(即为了实现固定, 预览页面等效果) 拖拽缩放的数据能回传给上层组件并提供受控机制 实现以上四点我们就可以实现一个可用的拖拽缩放组件. 接下来笔者就来介绍一下实现的开源拖拽缩放组件rc-drag. 我们可以在父组件中绑定对应的方法, 如下: <Drag container="#box" size={[200, 200]} zIndex={2} onDragStart={(item
1.5K20发布于 2021-01-20来自专栏lonelydawn的前端猿区秒懂 javascript 拖拽上传文件
padding: 12px; border: 3px dashed #F8BBD0; border-radius: 5px; font-size: 20px; color: #2c1612
<script type="text/<em>javascript</em> text } }) </script> </body> </html> 说明 需对目标区域添加 drop 事件监听，在回调 中通过 参数 e.dataTransfer.files 获取被<em>拖拽</em>上传的文件数组1.8K70发布于 2018-03-29来自专栏小孟开发笔记微信小程序单指拖拽和双指缩放旋转
小程序单指拖拽和双指操作是一个比较常用的功能，效果如下图 实现这三个功能，主要用三个触摸事件touchstart、touchmove、touchend <view style="height: 100vh 双指<em>缩放</em>的原理是根据两点坐标求出距离(勾股定理)，然后在用移动坐标的距离比就可以求出<em>缩放</em>倍数 touchmove touchMove(e) { const touches = e.touches && startTouches.length === <em>2</em>) { // 双指<em>缩放</em> const { pageX: twoPageX, pageY: twoPageY } = touches == <em>2</em>) { // 单指<em>拖拽</em> this.setData({ translateX: onePageX - startMove.x, translateY: == <em>2</em>这个判断的原因是防止图片跳动，因为如果你两个手指触摸，然后离开一个手指，我是禁止<em>拖拽</em>的，只有双指都离开后再次触摸才能单指<em>拖拽</em> 双指旋转 双指旋转的原理是根据三角函数求出起始点的角度，然后再求出移动坐标的角度
3.8K31编辑于 2023-03-07来自专栏xinxin的随笔记录【javaScript案例】之鼠标拖拽效果
这次的效果图如下： 拖拽.gif 我认为这个实验的难点是保持盒子和鼠标的相对位置不变，通过鼠标按下和移动来实现拖拽的效果 如何实现拖拽的效果呢？ background-color: aquamarine; border-radius: 14px; box-shadow: 2px 2px 6px rgba(0,0,0,.3); /* 好家伙 都没设置定位 就想移动 改变left。。。
1.7K30编辑于 2022-03-29来自专栏梦魇小栈使用 JavaScript 实现简单的拖拽
步骤 使用 JavaScript 实现拖拽的步骤： 让元素捕获事件（mousedown, mousemove & mouseup） 单击并不释放，触发 mousedown，标记开始拖拽，并获取元素和鼠标的位置 拖动鼠标，触发 mousemove，不断的获取鼠标的位置，并通过计算重新确定元素的位置 释放师表，触发 mouseup，结束拖拽，确定元素位置并更新 被拖拽的元素必须是相对父元素定位，或者是绝对定位 拖拽再快都不会超出 document 的范围。 mouseup 拖拽结束，取消拖拽的标记。使其触发 mousemove 事件，但不做任何处理。 function up(e) { dragging = false; } 在线演示 总结 上面使用的简单的 JavaScript 代码实现了元素的拖拽，但并没有对兼容性问题全面考虑，也没有对性能优化
2K40发布于 2018-10-31<script type="text/<em>javascript</em> " src="/Js/mobile/jquery.js"></script> <script type="text/<em>javascript</em>" src="http://api.map.baidu.com v=1.4"></script> <script type="text/<em>javascript</em>"> var obj = null; var divObj = null来自专栏acoolgiser_zhuanlanJavaScript 鼠标拖拽div 改变其大小
转自： http://www.cnblogs.com/yushang/archive/2013/03/19/2968782.html 想让div实现拖拽改变大小功能，类似于soso地图（即现在的腾讯地图 ）的看街景时地图可以拖拽等功能 ? background-position: 0px 0px;">
2.5K30发布于 2019-01-17来自专栏前端数据可视化Fabric.js 锁定背景图，不受缩放和拖拽的影响🎃
如果你的项目有画布拖拽、缩放等功能，而且你不希望背景图跟随拖拽或缩放，那一定要往下读。 本文主要讲解如何锁定背景图，锁定背景图其实只需设置1个属性即可。 本文会添加滚轮缩放画布、拖拽画布等功能来测试 “锁定背景图” 的效果。 应该可以清晰看出，不管如何拖拽和缩放画布，背景图都纹丝不动。 / 初始化画布 const canvas = new fabric.Canvas('canvasBox', { backgroundVpt: false // 不受视口变换影响（也就是不管拖拽还是缩放画布 添加滚轮缩放 使用滚轮缩放画布，需要监听 mouse:wheel 。 最后添加拖拽画布事件。
3.9K20编辑于 2022-06-10来自专栏岳泽以博客JavaScript案例：弹出登录框拖拽模态框
案例分析 点击弹出层，模态框和遮挡层就会显示出来display:block; 点击关闭按钮，模态框和遮挡层就会隐藏起来display:none; 在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除。 代码 <! ol, dl, dt, dd, div, p, span, h1, h2, 0.88); } </style> </head> <body>
<a id="link" href="<em>javascript</em> document.querySelector('#closeBtn'); var title = document.querySelector('#title'); // <em>2</em>.5K10编辑于 2022-10-26来自专栏网页前端2d转换缩放与旋转
## 本章将介绍简单的2d缩放的实现，并且举几个简单的应用案例。 No.1缩放属性 ? ? ，为何我们不直接改width和height,因为这种方法改出来的图形不是等比缩放，破坏了网页制作的美观，transform比较方便和美观。 transform: scale(x,y) x 和 y分别等于数字，大于一就是放大，小于一就是缩小，很好应用，缩放属性是相对于中心点，默认的中心点为盒子的中心。 No.2旋转属性 transform: rotate(45deg); 上代码，可以去vscode来打一打代码。 */ transform: scale(0.5, 0.5); } 这段代码与上面的那串代码一样，但是多了两行，一个是动画效果，还有一个就是中心的改变，中心点由默认的中间改变到了左下角，所以这种缩放便不是等比缩放
70210发布于 2021-04-13腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号