时间:2021-05-25
效果图如下
github地址如下: github地址
使用方法
引入js和对应的css
import Drag from '../../static/dragger.js'import './assets/css/dragger.css'之后,实例化
new Drag({ id: 'box-dragger', showAngle: true, isScale: false, showBorder: false})new Drag({ id: 'box-dragger2', canZoom: false, canRotate: false})new Drag({ id: 'img-box', showAngle: true, showPosition: true })new Drag({ id: 'test'})具体实现(封装细节)
功能细节整理:
技术难点:
可以选中某元素,直接给该元素内部加上操作的点
有一个pannel,选中某元素时,将这个pannel定位到该元素的位置上
这两种方式都实现过一次,第一种比较简单,但是第一种,不好控制选中某个元素才让操作点展示。
如何封装:
考虑如何让用户快速上手使用,可参考的点:
实现过程:
可配置参数
字段 说明 是否必填 默认值 id 目标元素id 是 无 container 父容器id 否 body canRotate 是否可以旋转 否 true canZoom 是否可以缩放 否 true canPull 是否可以拉升 否 true canMove 是否可以平移 否 true showAngle 展示角度 否 false showPosition 展示位置 否 false isScale 是否等比例缩放 否 true showBorder 是否展示pannel的border 否 false
属性
具体看图:
代码解说
初始化参数
初始化目标dom对象的位置:记录其:
初始化pannel结构
当前的父容器中只有一个pannel结构,每次实例化对象时,会判断一下如果当前这个父容器里已经存在id为pannel的结构,就将其子节点清空,按照当前实例化对象传进来的属性重新渲染pannel子结构。如果没有id为pannel的结构,就创建。
初始化事件
dom操作
旋转操作
鼠标按下时,记录当前鼠标位置距离box中心位置的y/x的反正切函数A1。
this.mouseInit = { x: Math.floor(e.clientX), y: Math.floor(e.clientY)}this.preRadian = Math.atan2(this.mouseInit.y - this.centerPos.y, this.mouseInit.x - this.centerPos.x)鼠标移动时,记录再次计算鼠标位置距离box中心位置的y/x的反正切函数A2。
this.rotateCurrent = { x: Math.floor(e.clientX), y: Math.floor(e.clientY)}this.curRadian = Math.atan2(this.rotateCurrent.y - this.centerPos.y, this.rotateCurrent.x - this.centerPos.x)求A2-A1,求出移动的弧度
this.tranformRadian = this.curRadian - this.preRadian求出最后box的旋转角度,this.getRotate(target)是js中获取某dom元素的旋转角度的方法(粘贴过来的,亲测好使)
this.angle = this.getRotate(target) + Math.round(this.tranformRadian * 180 / Math.PI)this.preRadian = this.curRadian //鼠标移动的每一下都计算这个角度,所以每一下移动前的弧度值都上一次移动后的弧度值计算旋转后box每个点的坐标,根据余弦公式,传入:旋转前每点坐标,旋转中心坐标和旋转角度
let disAngle = this.angle - this.initAnglethis.rightBottomPoint = this.getRotatedPoint(this.initRightBottomPoint, this.centerPos, disAngle)this.rightTopPoint = this.getRotatedPoint(this.initRightTopPoint, this.centerPos, disAngle)this.leftTopPoint = this.getRotatedPoint(this.initLeftTopPoint, this.centerPos, disAngle)this.leftBottomPoint = this.getRotatedPoint(this.initLeftBottomPoint, this.centerPos, disAngle)this.leftMiddlePoint = this.getRotatedPoint(this.initLeftMiddlePoint, this.centerPos, disAngle)this.rightMiddlePoint = this.getRotatedPoint(this.initRightMiddlePoint, this.centerPos, disAngle)this.topMiddlePoint = this.getRotatedPoint(this.initTopMiddlePoint, this.centerPos, disAngle)this.bottomMiddlePoint = this.getRotatedPoint(this.initBottomMiddlePoint, this.centerPos, disAngle)沿着一个方向拉升操作。
沿着一个角缩放操作。 这两个操作,主要参考了一个大佬的拖拽思想实现的 github wiki地址
优化,mousemove事件添加节流函数
function throttle(fn, interval) { let canRun = true; return function () { if (!canRun) return; canRun = false; setTimeout(() => { fn.apply(this, arguments); canRun = true; }, interval); };}let that = thisdocument.addEventListener('mousemove', throttle(function (e) { e.preventDefault && e.preventDefault() that.moveChange(e, that.targetObj)}, 10))以上所述是小编给大家介绍的基于javascript的拖拽类封装详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
rubyftp封装实例详解最近自己用ruby封装了一个Net::FTP的工具类.classFtpTooldefinitialize()@current_ftp=
使用JavaScript封装单向链表:1.封装LinkList的类,用于表示我们的链表结构。2.在LinkList类中有一个Node类,用于封装每一个节点上的信
本文实例为大家分享了基于jQuery封装的拖拽事件,供大家参考,具体内容如下HTML代码:Document*{padding:0;margin:0;}.box{
Python类的继承详解Python既然是面向对象的,当然支持类的继承,Python实现类的继承比JavaScript简单。Parent类:classParen
本文实例讲述了php基于单例模式封装mysql类。分享给大家供大家参考,具体如下:类:?123456789101112131415161718192021222