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

具体实现（封装细节）

功能细节整理：

旋转
缩放
平移

技术难点：

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

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

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

如何封装：

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

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

实现过程：

可配置参数

属性

canRotate
canZoom
canPull
canMove
showAngle
isScale
id
container
targetObj
pannelDom 操作divdom
…

具体看图：