189 8069 5689

javascript中怎么封装一个拖拽类-创新互联

这篇文章将为大家详细讲解有关javascript中怎么封装一个拖拽类，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

为定兴等地区用户提供了全套网页设计制作服务，及定兴网站建设行业解决方案。主营业务为成都网站制作、网站设计、定兴网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

引入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中怎么封装一个拖拽类就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


文章名称：javascript中怎么封装一个拖拽类-创新互联
URL网址：http://cdxtjz.cn/article/ppodd.html

其他资讯