hammer.js移动端拖拽缩放旋转元素

第一步

下载hammer.js并引入
下载地址可以是：http://hammerjs.github.io/

第二步

复制下面这些代码，放在你的js里面

function drag(drag){var reqAnimationFrame = (function () {return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {window.setTimeout(callback, 1000 / 60);};})();var el = document.querySelector(drag);var START_X = 0;var START_Y = 0;var ticking = false;var transform; //图像效果var timer;var initAngle = 0; //旋转角度var initScale = 3; //放大倍数var mc = new Hammer.Manager(el); //用管理器 可以同时触发旋转 拖拽 移动//var mc = new Hammer(el); //旋转和移动互斥/**ev.srcEvent.type touchstart touchend touchmoveev.deltaX 手势移动位移变量 */mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);//结束时做一些处理mc.on("hammer.input", function(ev) {if(ev.isFinal) {console.log(START_X+" "+transform.translate.x +" "+ev.deltaX);START_X = transform.translate.x ;START_Y = transform.translate.y ;}});mc.on("panstart panmove", onPan);mc.on("rotatestart rotatemove rotateend", onRotate);mc.on("pinchstart pinchmove", onPinch);/**第二次进入拖拽时 delta位移重置移动时 初始位置startxy不动。delta增加*/function onPan(ev){if(!ev.isFinal) {$(drag).removeClass('animate');console.log(START_X +" "+ START_Y +" | "+ev.deltaX +" "+ ev.deltaY); transform.translate = {x: START_X + ev.deltaX,y: START_Y + ev.deltaY};requestElementUpdate();} }function onPinch(ev){if(ev.type == 'pinchstart') {initScale = transform.scale || 1;}$(drag).removeClass('animate');transform.scale = initScale * ev.scale;requestElementUpdate(); }//旋转相关var preAngle =0 ;var tempAngleFlag=0;var deltaAngle = 0; var startRotateAngle = 0;function onRotate(ev) {//点下第二个触控点时触发if(ev.type == 'rotatestart') { startRotateAngle = ev.rotation ; tempAngleFlag = 0 ;} if(ev.type == 'rotatemove'){if(tempAngleFlag == 0){preAngle = startRotateAngle;tempAngleFlag ++;}else{ deltaAngle = ev.rotation - preAngle;$(drag).removeClass('animate');transform.rz = 1; //非0 垂直xy轴transform.angle =initAngle + deltaAngle; requestElementUpdate(); }}//旋转结束 记录当前图片角度 if(ev.type =='rotateend'){initAngle = transform.angle;} }function updateElementTransform() {var value = ['translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)','scale(' + transform.scale + ', ' + transform.scale + ')','rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+ transform.angle + 'deg)'];value = value.join(" ");el.style.webkitTransform = value; /*为Chrome/Safari*/el.style.mozTransform = value; /*为Firefox*/el.style.transform = value; /*IE Opera?*/ticking = false;}function requestElementUpdate() {if(!ticking) {reqAnimationFrame(updateElementTransform);ticking = true;}}/**初始化设置*/function resetElement() {el.className += ' animate';transform = {translate: { x: START_X, y: START_Y },scale: 1,angle: 0,rx: 0,ry: 0,rz: 0};requestElementUpdate();}resetElement();
}

第三步

直接调用drag方法，传入你要移动/缩放/旋转的元素，控制几个调用几次就行
比如，我需要控制的是class为a的div和class为b的div，则：

drag('.a');
drag('.b');

hammer.js移动端拖拽缩放旋转元素相关推荐

html鼠标拖动变换大小案例,js实现鼠标拖拽缩放div实例代码_哒哒_前端开发者
封装为了jq插件,如下 drag. ;(function ($) { $.fn.dragDiv = function (options) { var def = { maxW:600,// 可伸缩的最 ...
H5头像完整制作，可拖拽缩放，可添加装饰图标（装饰图标支持缩放、旋转、拖拽）
H5头像制作类的程序本以为到处都可以搜索到,可是真写这个项目的时候才发现太困难了,因为根本没有现成的功能模块可以拼凑,着实费了不少力气,好在最终圆满交工. 还是先看效果源码获取渠道小程序内联系客服 ...
html手机模块化,jQuery 移动端拖拽（模块化开发，触摸事件，webpack）
通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...
iOS学习笔记-068.手势识别02——捏合、拖拽、旋转手势
手势识别02捏合拖拽旋转手势一捏合手势 1 UIPinchGestureRecognizerh 2 代码示例 3 图示二拖拽手势 1 UIPanGestureRecognizerh 2 代码示例 ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
vue-draggable-resizable-gorkys 可拖拽缩放的组件
说明:组件基于vue-draggable-resizable进行二次开发. 文章引用于vue-draggable-resizable 可拖拽缩放的组件 - SegmentFault 思否 git引用于 ...
vue移动端拖拽悬浮按钮
vue移动端拖拽悬浮按钮功能介绍: 大致需求: 整体思路: 简单效果展示: 具体实现: 一.position:fixed布局: 二.touch事件绑定: 三.页面引入: 功能介绍: 在移动端开发中, ...

hammer.js移动端拖拽缩放旋转元素

第一步

第二步

第三步

hammer.js移动端拖拽缩放旋转元素相关推荐

最新文章

热门文章