基于javascript的拖拽类封装详解


Posted in Javascript onApril 19, 2019

效果图如下

基于javascript的拖拽类封装详解

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'
})

具体实现(封装细节)

功能细节整理:

  1. 旋转
  2. 缩放
  3. 平移

技术难点:

  1. 旋转时要注意盒子每一个点的位置发生了变化
  2. 针对拖拽后的盒子的left和top都有变化,计算其left和top时需将其按照中心轴旋转摆正,再进行计算
  3. 当且仅有一个盒子是被选中的盒子,点击哪个选中哪个。(当前页面多个实例化Drag对象时,如何保证操作互不影响)
  4. 实现的两种不同方式:

可以选中某元素,直接给该元素内部加上操作的点
有一个pannel,选中某元素时,将这个pannel定位到该元素的位置上

这两种方式都实现过一次,第一种比较简单,但是第一种,不好控制选中某个元素才让操作点展示。

如何封装:

考虑如何让用户快速上手使用,可参考的点:

  1. 用户需要传入什么必须的参数
  2. 暴露给用户什么可设置的参数和方法

实现过程:

可配置参数

字段 说明 是否必填 默认值
id 目标元素id
container 父容器id body
canRotate 是否可以旋转 true
canZoom 是否可以缩放 true
canPull 是否可以拉升 true
canMove 是否可以平移 true
showAngle 展示角度 false
showPosition 展示位置 false
isScale 是否等比例缩放 true
showBorder 是否展示pannel的border false

属性

  1. canRotate
  2. canZoom
  3. canPull
  4. canMove
  5. showAngle
  6. isScale
  7. id
  8. container
  9. targetObj
  10. pannelDom 操作divdom
  11. ...

具体看图:

基于javascript的拖拽类封装详解

代码解说

初始化参数

初始化目标dom对象的位置:记录其:

  1. left平距左
  2. top
  3. width
  4. height
  5. angle
  6. rightBottomPoint 目标dom对象右下坐标
  7. rightTopPoint 目标dom对象右上坐标
  8. leftTopPoint 目标dom对象左上坐标
  9. leftBottomPoint 目标dom对象左下坐标
  10. leftMiddlePoint 目标dom对象左中坐标
  11. rightMiddlePoint 目标dom对象右中坐标
  12. topMiddlePoint 目标dom对象上中坐标
  13. bottomMiddlePoint 目标dom对象下中坐标
  14. centerPos 目标dom对象中心点坐标

初始化pannel结构

当前的父容器中只有一个pannel结构,每次实例化对象时,会判断一下如果当前这个父容器里已经存在id为pannel的结构,就将其子节点清空,按照当前实例化对象传进来的属性重新渲染pannel子结构。如果没有id为pannel的结构,就创建。

初始化事件

  1. 给pannelDom和targetObj绑定mousedown事件
  2. 给document绑定mousemove和mouseup事件

 

initEvent () {
  document.addEventListener('mousemove', e => {
    e.preventDefault && e.preventDefault()
    this.moveChange(e, this.targetObj)
  })
  document.addEventListener('mouseup', e => {
    this.moveLeave(this.targetObj)
  })
  if (this.canMove) {
    // 外层给this.pannelDom添加mousedown事件,是在所有实例化结束后,panneldom被展示在最后一个实例化对象上,鼠标按下它时,触发moveInit事件
    this.pannelDom.onmousedown = e => {
      e.stopPropagation()
      this.moveInit(9, e, this.targetObj)
    }
    this.targetObj.onmousedown = e => {
      e.stopPropagation()
      this.moveInit(9, e, this.targetObj)
      this.initPannel()
      // 在点击其他未被选中元素时,pannel定位到该元素上,重写pannelDom事件,因为此时的this.pannelDom已经根据新的目标元素被重写
      this.pannelDom.onmousedown= e => {
        this.moveInit(9, e, this.targetObj)
      }
    }
  }
}

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.initAngle
this.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 = this
document.addEventListener('mousemove', throttle(function (e) {
  e.preventDefault && e.preventDefault()
  that.moveChange(e, that.targetObj)
}, 10))

以上所述是小编给大家介绍的基于javascript的拖拽类封装详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 #Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 #Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 #Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 #Javascript
浅谈Javascript中的对象和继承
Apr 19 #Javascript
详解如何在Vue项目中导出Excel
Apr 19 #Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 #Javascript
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
PHP URL路由类实例
2013/11/12 PHP
php中apc缓存使用示例
2013/12/25 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
获取body标签的两种方法
2011/10/13 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Python发展史及网络爬虫
2019/06/19 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
使用Python实现音频双通道分离
2020/12/25 Python
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
护士演讲稿范文
2014/01/05 职场文书
搞笑创意广告语
2014/03/17 职场文书
企业承诺书格式
2014/05/21 职场文书
金融与证券专业求职信
2014/06/22 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
民事调解协议书
2016/03/21 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
python中对列表的删除和添加方法详解
2022/02/24 Python
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS