效果图如下

Github地址如下：github地址

施用方式

介绍js和相应的css

从导入拖动././static/dragger . js“import”。/assets/CSS/dragger.css '，然后实例化

新拖动({ id: 'box-dragger '，showAngle: true，isScale: false，showBorder: false})新拖动({ id: 'box-dragger2 '，Canzoom : false，canrotate : false})新拖动({id :' img-box '，showangle : true，showposition : true})新拖动({ id 3: '

功能细节整理：

旋转、缩放和平移的技术难点：

旋转时，注意盒子各点位置的变化。对于拖框的左边和顶部，在计算其左边和顶部时，需要根据中心轴旋转拉直，然后再计算。当只有一个框是选定的框时，单击要选择的框。(在当前页面上实例化多个Drag对象时如何保证操作不互相影响)有两种不同的实现方式：可以选择一个元素，直接在元素内部的操作点添加一个面板。选择一个元素后，将面板定位在该元素的位置。

这两种方法都实现过一次。第一种比较简单，但是第一种在操作点显示之前很难控制和选择一个元素。

如何打包：

考虑如何让用户快速上手。参考点：

用户需要传入和向用户公开哪些必要的参数，哪些可设置的参数和方法实现过程：

可配置参数

字段说明是否需要默认值id目标元素id是没有容器的父容器id无主体可旋转无真可缩放无真可拉可拉可拉可移动可平移无真显示角度显示角度无假显示位置无假显示位置为等比例无真显示边框显示面板边框无假属性

可以旋转可以缩放可以拖动可以移动显示角度是缩放id容器目标obj面板DOM操作divdom.详情见图：

代码解释

初始化参数

初始化目标dom对象的位置：记录它：

左侧水平顶部宽度高度角度右侧底部点目标dom对象右下角坐标右侧顶部点目标dom对象右上角坐标左侧顶部点目标dom对象左上角坐标左侧底部点目标dom对象左下角坐标左侧中间点目标dom对象左中心坐标右侧中间点目标dom对象右中心坐标顶部中间点目标dom对象上中心坐标底部中间点目标dom对象下中心坐标中心点目标dom对象中心坐标初始化pannel结构

当前父容器中只有一个panel结构，每次实例化一个对象时，都会判断当前父容器中如果已经存在id为panel的结构，其子节点将被清空，panel的子结构将根据当前实例化对象传入的属性重新呈现。如果没有带id pannel的结构，请创建它。

初始化事件

将mousedown事件绑定到pannelDom，将targetObj和mousemove和mouseup事件绑定到文档

initEvent(){ document。addevent侦听器(' mousemove '，e={ e . prevent default e . prevent default()。这个。movechange(e，这个。targetobj)})文档。addevent侦听器(' mouseup '，e={ this。移动离开(这个。target obj)})if(this。canmove){//外层给this.pannelDom添加鼠标放下事件，是在所有实例化结束后潘纳杜姆被展示在最后一个实例化对象上，鼠标按下它时，触发移动初始化事件这个。PannelDom。onmouseDown=e={ e . stopperpagation()。这个。moveInit(9，e，这个。TargetObj)}这是。TargetObj。onmouseDown=e={ e . stopperpagation()。这个。moveInit(9，e，这个。TargetObj)这个。initpanel()//在点击其他未被选中元素时潘内尔定位到该元素上，重写pannelDom事件，因为此时的this.pannelDom已经根据新的目标元素被重写这个。PannelDom。onmouseDown=e={ this。moveInit(9，e，这个。TargetObj)} } } DOM操作

旋转操作

鼠标按下时，记录当前鼠标位置距离包厢中心位置的y/x的反正切函数A1。

这个。mouseinit={ x : math。floor(e . clientx)，y : math。这是。preradian=数学。阿坦2(这个。mouseinit。这个。中心位置。这个。mouseinit。这个。中心位置。十)鼠标移动时，记录再次计算鼠标位置距离包厢中心位置的y/x的反正切函数A2。

这个。rotatecurrent={ x : math。floor(e . clientx)，y : math。这是。curradian=数学。阿坦2(这个。旋转电流。这个。中心位置。这个。旋转电流。这个。中心位置。十)求A2-A1，求出移动的弧度

这个。tranformradian=这个。科拉迪安-这个。弧度前求出最后包厢的旋转角度，this.getRotate(目标)是射流研究…中获取某数字正射影像图元素的旋转角度的方法（粘贴过来的，亲测好使)

this.angle=this.getRotate(目标)数学。圆(这个。tranformradian * 180/数学.PI)这个。preradian=这个。curradian/鼠标移动的每一下都计算这个角度，所以每一下移动前的弧度值都上一次移动后的弧度值计算旋转后包厢每个点的坐标，根据余弦公式，传入：旋转前每点坐标，旋转中心坐标和旋转角度

让dissingle=这个。角度-这个。引发这个。右下点=这个。获取旋转点(这。最下面一点，这个。居中的位置，忽略)这个。右顶点=这个。获取旋转点(这。initlefttoppoint，这个。中心点，忽略)这个。右顶点=这个。获取旋转点(这。initright toppoint，这个。中心点，忽略)这个。左下点=这个。获取旋转点(这。initleftbottom点沿着一个方向拉升操作。

沿着一个角缩放操作。这两个操作，主要参考了一个大佬的拖拽思想实现的github wiki地址

优化，鼠标移动事件添加节流函数

函数节流(fn，间隔){ 0让canRun=true返回函数(){ if(！canRun)返回；canRun=false settimeout(()={ fn . apply(this，arguments)；canRun=true}，间隔);};}让它=此文档。addeventlistener('鼠标移动')，throttle(函数(e){ e . prevent default e . prevent default()。movechange(e，that.targetObj)}，10))以上所述是小编给大家介绍的基于爪哇岛描述语言的拖拽类封装详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！