JS 拖拽对齐参考线+自动吸附+对齐到网格

具体代码参见：https://github.com/yyccmmkk/js-reference-line

【需求】

对一个元素进行拖拽时，生成这个组件和其它组件对齐的参考线，实现各组件间四条边及水平中心线及垂直中心线对齐。在拖动完成后实现自动吸附对齐。

【解决思路】

1 MAP记录所有需要对齐组件的视窗坐标点（左上，右上，左下，右下）

2 P为当前拖拽对象实时的坐标点（左上，左下，右上，右下，中心点）

3 拿当前对象的坐标点P去匹配座标记录MAP

4 发现某一边对齐时，在canvas中画线，清除画布的操作应该在拖动时进行处理，

问题的关键在于如何快速的去计算当前组件的6条线（四边+中心线）和其它所有组件6条线在一条线上，看似麻烦其实可以简化逻辑为，只要判断三个点，左上角、右下角、中心点，在记录中有没有存在

如何判断两个组件垂直对齐？答：坐标x一样
如何判断两个组件水平对齐？答：坐标Y一样
如何记录坐标点便于查询
根据坐标画线

【答：3】

创建一个数组 tempArry 存放所有的坐标对象（包含座标信息），像下边这样

let tempArray=[{let:1,right:100,top:10,bottom:400},{let:2,right:200,top:20,bottom:600},{let:1,right:300,top:30,bottom:400}];

创建两个对象mapX 、mapY。对tempArray 进行遍历，mapX mapY 分别以x ,y 为key。值为数组（ps:因为有可能多个组件坐标是相同的），数组保存了坐标对象在tempArray中的索引。

mapX 记录所有组件的坐标x，每个组件三个x坐标（ps:左、中、右），结果如下

let mapX={1:[0,2],2:[1],50.5:[0],101:[1],150.5:[2],100:[0],200:[1],300:[2]};

mapY 记录所有组件的坐标y，每个组件有三个坐标y（ps:上、中、下），结果如下

let mapY={10:[0],205:[0],310:[1],215:[2],20:[1],30:[2],400:[0,2],600:[1],}

假设有一组件视窗坐标为(left:1,right:600,top:20,bottom:300);

通过判断左上角坐标点(p1) 就可以检测组件左边与上边的对齐，通过右下角坐标点(p2)，就可以检测组件右边与下边的对齐，对过中心坐标(p3)就可以找到水平与垂直线的对齐。

p1 x:1,y:20

p2 x:600,y:300

p3 x:300.5,y:160

mapX 中存在以x 为值的key 就证明有垂直对齐的线，

mapY 中存在以 y为值的key 就证明有水平对齐的线

通过map 中的值索引可以快速拿到对应的对齐组件信息，把当前组件的坐标点信息扔进去，取最大最小值就可以拿到对齐线的坐标信息，详见源码，大概思路是这样，其中还涉及一些细节，比如排自身的坐标信息等。

【自动吸附】

移动中的自动吸附功能不但性能开销高而且相对来说比较复杂，暂时开发为在拖动完成后进行自动吸附操作。

对于自动吸附可以抒理一下子功能点，

1 在吸附范围内找到符合的坐标点，也就是说目标点坐标（有3个目标点坐标）减掉当前座标点绝对值不大于吸附范围

2 在前边的功能中只要找到三个点就可以，所以吸附功能也要找到当前元素的这三个点坐标及吸附范围坐标

3 需要区分的是当前元素的哪条边对齐了，因为操作作当前元素样式时，如果底边或右侧的边对齐了需要减掉元素自身的宽或高

4 需要知道当前移动的方向，当用户在远离在吸附范围内的元素时不要吸附

具体的实现细节详见代码

【对齐到网格】

对齐到网格更简单，在之前的基础上把网格坐标放入需要吸附到的坐点数组里即可，生成网格x,y坐标放入，具体详见源码

JS 拖拽对齐参考线+自动吸附+对齐到网格相关推荐

15. QML控件拖拽并实现自动吸附功能
效果展示: 效果1:自动吸附,但被拖拽控件无法重复使用拖拽吸附不可重复实现步骤: 1. 第一步: 简单布局,在左侧矩形区域中添加一个小的矩形框,是需要被拖拽的控件,重点是要对这个将要拖拽的小矩形控 ...
vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
js拖拽360桌面悬浮球代码
js拖拽360桌面悬浮球代码原生js制作简单好用的360桌面悬浮球,可拖拽到浏览器边缘,自动贴边,自动适应屏幕效果. 演示地址下载地址
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
LayaAir拖拽移动对象并吸附(附源码)
前言: 拖拽移动对象是2D休闲小游戏中常用的一个功能,典型代表例如<植物大战僵尸>中,种植植物的表现形式,拖拽植物卡片种植到相应的地点.今天介绍一下在Laya项目中实现这一功能. 该功能实 ...
sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
解决JS拖拽出现的问题
解决JS拖拽出现的问题参考文章: (1)解决JS拖拽出现的问题 (2)https://www.cnblogs.com/yuanjingjing/p/10154198.html 备忘一下.

JS 拖拽对齐参考线+自动吸附+对齐到网格

JS 拖拽对齐参考线+自动吸附+对齐到网格相关推荐

最新文章

热门文章