- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端 TS/JS 核心讲堂
js拖拽-javascript拖拽缩放示例
本文将系统讲解 原生 JavaScript 实现拖拽功能的核心原理、完整代码示例、常见问题及高级技巧。 一、两种主流实现方式方式 1：使用 HTML5 原生 Drag & Drop API（推荐用于跨容器拖拽）✅ 标准化，浏览器原生支持✅ 支持文件拖入、跨 iframe 拖拽❌ 事件模型复杂，样式控制受限 charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>拖拽缩放 pointer; } button:hover { background: #40a9ff; } </style> </head> <body>
拖拽缩放示例 总结 场景推荐方案表格行/列排序、看板卡片移动✅ mousedown + mousemove 自定义拖拽文件上传、跨应用拖拽⚠️ HTML5 Drag & Drop API复杂物理效果（
14521编辑于 2026-04-01 - 来自专栏向治洪
图片缩放，拖拽等操作
跟系统图库的效果一样哦，先贴一张美女图片，听说有美女，男人就会多看一眼，不知道是不是真的，哈哈 布局文件需要注意的一点是 scaleType一定要是 matrix，这样才能对图片进行一系列的矩阵操作，例如放大缩小，拖拽 */ float minScaleR = 1.0f; /** 最大缩放比例*/ static final float MAX_SCALE = 10f; /** 初始状态*/ static final int NONE = 0; /** 拖动*/ static final int DRAG = 1; /** 缩放*/ static final int ZOOM :"+p[0]+",最小缩放级别:"+minScaleR); matrix.setScale(minScaleR, minScaleR); } if (p[0] > MAX_SCALE) { //Log.d("", "当前缩放级别:"+p[0]+",最大缩放级别:"+MAX_SCALE); matrix.set
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实现拖拽缩放元素
6.9K20发布于 2020-11-26 - 来自专栏Android技术分享
Flutter 可以缩放拖拽的图片
在pub上面找了下，没有发现一个效果跟微信一样的支持缩放拖拽效果的image，所以就自己撸了一个，之前写过Flutter 什么功能都有的Image，于是就在这个上面新增了这个功能。 主要功能： 缩放拖拽 在PageView里面缩放拖拽 支持缩放拖拽 ? 缩放动画最大值，当缩放结束时回到maxScale值 maxScale * 1.2 speed 缩放拖拽速度，与用户操作成正比 1.0 inertialSpeed 拖拽惯性速度，与惯性速度成正比 100 = null) { return _center; } 在PageView里面缩放拖拽 ? == null); assert(_hold == null); _hold = position.hold(_disposeHold); } 到达边界滚动上下一个图片 有了之前缩放拖拽的基础
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实现图片滚轮缩放和拖拽
<template>
</template> <script setup> import { ref } from 'vue' const url = ref("https://w.wallhaven.cc/3.2K30编辑于 2021-12-28 - 来自专栏娱乐心理测试
小程序的拖拽、缩放和旋转手势
rotate: that.data.rotate + (curAngle - perAngle) }) }else { // 计算距离，缩放 twoPoint.x2), 2) + Math.pow((twoPoint.y1 - twoPoint.y2), 2)) that.setData({ msg: '缩放
1.7K40发布于 2018-06-08 - 来自专栏桑榆肖物
一款简单的缩放拖拽图片控件
本文介绍一个针对 .NET 桌面应用程序的独立图片缩放拖拽显示控件 SQPhoto[1]。 基于 PictureBox 的图片展示工具，增加了拖动和缩放功能，便于在某些场景下的图片展示，比如我前面开发的 Snipping_OCR[2] 工具就使用了这个组件。 Snipping_OCR 该用户组件采用 Panel 和 PictureBox 组合的方式，控制 PictureBox 在 Panel 容器中显示的位置和大小来实现拖拽和放大缩小的功能。 PicBox.Top + (Cursor.Position.Y - mouseDownPoint.Y)); mouseDownPoint = Cursor.Position; } } 缩放的实现 ： ///
/// 控制图片缩放 /// /// <param name="change">变化情况，大于 0 放大，小于 0 缩小</param> public1.3K40编辑于 2022-11-18 - 来自专栏前端壹栈
JavaScript进阶之实现拖拽
之前我们来实现原生拖拽 原生实现拖拽 Mouse事件实现拖拽 在h5之前，原生实现拖拽是根据Mouse事件来实现的，需要用到以下这三个事件mousedown,mouseup,mousemove mousedown JavaScript三大家族 ? ? 明白了上述?三个事件方法的作用以及JavaScript三大家族，我们来实现个简单版的拖拽 <! drag: 拖拽源 drop：拖拽源最终放置的目标 DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。 ，此事件作用在目标元素上 ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上 ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 参考:MDN HTML5 drag & drop 拖拽与拖放简介
3.2K40发布于 2021-01-08 - 来自专栏前端 TS/JS 核心讲堂
原生JavaScript拖拽代码示例
其中，通过拖拽直接交换单元格内容是一种直观、高效的操作方式，广泛应用于课程表编排、任务看板、配置管理等场景。 本文将详细介绍如何使用 纯原生 JavaScript（无任何框架依赖） 实现一个支持单元格拖拽交换的 HTML 表格，并提供完整可运行的源代码。 一、核心设计思路本方案摒弃了复杂的 HTML5 Drag and Drop API，转而采用更可控、兼容性更强的 鼠标事件模拟拖拽 方式，主要包含以下关键组件：主表格：标准
结构，所有
单元格均可拖动；拖影层（Helper Layer）：一个绝对定位的 ，作为被拖单元格的视觉副本，跟随鼠标移动；状态管理：记录当前拖拽源、原始内容、偏移量及目标单元格；视觉反馈：拖拽源高亮为淡紫色 ，禁止拖拽冻结区域；移动端适配：补充 touchstart/touchmove/touchend 事件。11721编辑于 2026-04-01来自专栏彭湖湾的编程世界【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件
为什么学习HTML5？ 咳咳， 回到主题，为什么我们要学HTML5呢？ 1.了解HTML5的囊括范围的一大好处是：当你不小心使用了一个H5的东东的时候（例如你试图通过百度找到的答案解决一个紧张的需求），你会很及时的关注它的兼容性 2.H5有些新增的特性也许你从没接触过，也感觉无需用到它 如何使得被拖拽元素可拖拽？（因为元素默认的行为是不可拖拽的），以及如何使得被放置的容器元素可放置？ appendChild之类的API实现添加被拖拽的元素，从而模拟整个拖拽的过程 也就是说， 拖拽其实可分为三个过程： 拖动—传递被拖动元素的数据（如id）—在容器元素中添加该元素 关键在于如何在被拖动元素和被放置元素中传递数据 拖拽后 ? 参考资料： HTML5-MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5 【完】
3.5K30发布于 2018-07-31来自专栏彭湖湾的编程世界【javascript】谈谈HTML5—Web Worker+canvas+indexedDB+拖拽事件
为什么学习HTML5？ 咳咳， 回到主题，为什么我们要学HTML5呢？ 1.了解HTML5的囊括范围的一大好处是：当你不小心使用了一个H5的东东的时候（例如你试图通过百度找到的答案解决一个紧张的需求），你会很及时的关注它的兼容性 2.H5有些新增的特性也许你从没接触过，也感觉无需用到它 如何使得被拖拽元素可拖拽？（因为元素默认的行为是不可拖拽的），以及如何使得被放置的容器元素可放置？ appendChild之类的API实现添加被拖拽的元素，从而模拟整个拖拽的过程 也就是说， 拖拽其实可分为三个过程： 拖动—传递被拖动元素的数据（如id）—在容器元素中添加该元素 关键在于如何在被拖动元素和被放置元素中传递数据 拖拽后 ? 参考资料： HTML5-MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5 【完】 ?
4.2K100发布于 2018-01-03来自专栏踏浪的文章HTML5拖拽
@(HTML5)[HTML 5拖拽] HTML 5 拖拽事件 图片自带拖拽功能 其他元素可设置draggable属性：draggable ：true 拖拽元素(被拖拽的元素)事件 : ondragstart : 拖拽的一瞬间触发 ondrag : 拖拽前、拖拽结束之间，连续触发 ondragend : 拖拽结束触发 目标元素(拖拽元素被拖到的地方)事件 : ondragenter > drag -> dragenter -> dragover -> dragleave -> drop -> dragend 火狐下的兼容 火狐浏览器下需设置dataTransfer对象才可以拖拽除图片外的其他标签 , link, linkMove, move, all 和 uninitialized) setDragImage ： 三个参数（指定的元素，坐标X，坐标Y） files： 获取外部拖拽的文件
4.4K10发布于 2019-07-31来自专栏趣谈前端轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报
最近笔者专注于研究可视化搭建平台的解决方案, 分析了很多拖拽组件和页面动态化技术, 也在 H5-Dooring 项目中做了很多技术实现, 包括: 搭建平台的组件设计和分类模式 拖拽生成页面方案 动态表单编辑器设计 我们从可视化搭建平台的实际业务出发, 可以分析出拖拽缩放有如下几个功能点: 自由拖拽 支持控制点, 多方位缩放 支持自由控制层级 支持组件静态化(即为了实现固定, 预览页面等效果) 拖拽缩放的数据能回传给上层组件并提供受控机制 实现以上四点我们就可以实现一个可用的拖拽缩放组件. 另一个场景是我们要实现公共的页面渲染器, 在编辑状态下可以自由拖动缩放, 但是在预览状态下需要让元素固定, 不能出现自有拖拽等功能, 类似 h5-dooring 那种模式, 这个时候我们需要让拖拽组件@ 支持移动端拖拽 目前笔者已经支持移动端使用@alex_xu/rc-drag组件了, 我们如果要做移动端的H5编辑器, 可以直接使用它来实现拖拽功能. ?
1.5K20发布于 2021-01-20来自专栏eadelaHTML5-拖拽
float: left; } p{ background-color: orange; margin-top: 5px --在h5中，如果想拖拽元素，就必须为元素添加draggable="true". float: left; } p{ background-color: orange; margin-top: 5px --在h5中，如果想拖拽元素，就必须为元素添加draggable="true". =0.5; e.target.parentNode.style.borderWidth="5px"; obj= e.target; /*通过dataTransfer
1.2K20发布于 2019-09-29来自专栏小孟开发笔记微信小程序单指拖拽和双指缩放旋转
小程序单指拖拽和双指操作是一个比较常用的功能，效果如下图 实现这三个功能，主要用三个触摸事件touchstart、touchmove、touchend <view style="height: 100vh 双指<em>缩放</em>的原理是根据两点坐标求出距离(勾股定理)，然后在用移动坐标的距离比就可以求出<em>缩放</em>倍数 touchmove touchMove(e) { const touches = e.touches == 2这个判断的原因是防止图片跳动，因为如果你两个手指触摸，然后离开一个手指，我是禁止<em>拖拽</em>的，只有双指都离开后再次触摸才能单指<em>拖拽</em> 双指旋转 双指旋转的原理是根据三角函数求出起始点的角度，然后再求出移动坐标的角度 保存当前旋转角度 this.data.oldRotate = this.data.rotate }, 总结 代码片段https://developers.weixin.qq.com/s/0nS1tImU7Rs<em>5</em> H<em>5</em>原理一致，只需改一下语法即可 我这个只是基础版本，如果需要一些边界控制和还一些需求的限制，计算据边框距离即可，也可以用小程序的boundingClientRectAPI
3.8K31编辑于 2023-03-07来自专栏xinxin的随笔记录【javaScript案例】之鼠标拖拽效果
这次的效果图如下： 拖拽.gif 我认为这个实验的难点是保持盒子和鼠标的相对位置不变，通过鼠标按下和移动来实现拖拽的效果 如何实现拖拽的效果呢？
1.7K30编辑于 2022-03-29来自专栏lonelydawn的前端猿区秒懂 javascript 拖拽上传文件
100%; box-sizing: border-box; padding: 12px; border: 3px dashed #F8BBD0; border-radius: 5px
<script type="text/<em>javascript</em> text } }) </script> </body> </html> 说明 需对目标区域添加 drop 事件监听，在回调 中通过 参数 e.dataTransfer.files 获取被<em>拖拽</em>上传的文件数组1.8K70发布于 2018-03-29来自专栏梦魇小栈使用 JavaScript 实现简单的拖拽
步骤 使用 JavaScript 实现拖拽的步骤： 让元素捕获事件（mousedown, mousemove & mouseup） 单击并不释放，触发 mousedown，标记开始拖拽，并获取元素和鼠标的位置 拖动鼠标，触发 mousemove，不断的获取鼠标的位置，并通过计算重新确定元素的位置 释放师表，触发 mouseup，结束拖拽，确定元素位置并更新 被拖拽的元素必须是相对父元素定位，或者是绝对定位 拖拽再快都不会超出 document 的范围。 mouseup 拖拽结束，取消拖拽的标记。使其触发 mousemove 事件，但不做任何处理。 function up(e) { dragging = false; } 在线演示 总结 上面使用的简单的 JavaScript 代码实现了元素的拖拽，但并没有对兼容性问题全面考虑，也没有对性能优化
2K40发布于 2018-10-31腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号