【Web前端问题】js中拖拽过程中 参考线功能的实现思路

图片描述

带网格 拖拽带参考线定位提示 ， 这种JS如何实现 一般的思路是怎样的设计。
拖拽时 要看场景中组件的位置 自动对齐其他组件的2边或中心 在边缘对齐边界

回答：

我在知乎上有个回答，回答的正好是这个问题，这里简要说一下大概的思路，具体的可以查看知乎的答案：https://www.zhihu.com/questio...

实现的效果大概是这样： http://yeetoo.ymark.cc/（其中有不完善的地方，以后会被慢慢完善）

主要思路：

鼠标按下并且监听移动的对象 ----> 根据对象的边界，和所有的对象进行比对，如果差值<=5（此值决定吸附区间，可以根据情况进行改变。），则向画布中添加一条辅助线。 ----> 鼠标释放清除所有的辅助线。

实现的详细版：也只是说个大概，就不上具体代码了。

let auxiliary_line_arr = []; // 需要添加的辅助线列表
function 监听鼠标按下事件的回调{
    auxiliary_line_arr=[];
}
function 监听鼠标移动事件的回调{
    const adsorp_arr = [];
    1.获取移动对象边界
    2.获取所有的对象的边界
    3.进行边界比对 {
        1.先判断是否靠近边界
        2.再判断是否有相交或者要相交的对象
        if(差值<5px的时候){
            auxiliary_line_arr.push({要画的线的坐标点});
            adsorp_arr.push(吸附参数);
        }
    }
    4.实现吸附
        adsorp_arr.map(() => {
            if( Math.abs(移动对象的x-吸附[value]) <= 5 ){
                设置移动对象的x = 吸附[value];
            }
        })
}
// 任何移动或者改变操作都会触发这个方法
function 监听画布重新渲染被调用的方法{
    auxiliary_line_arr.map((k) => 向画布中添加一条线; );
}
function 监听鼠标释放事件的回调{
    auxiliary_line_arr = [];
}

回答：

一年半之前，我司计划开发一款可视化建站的产品。当时我也在社区寻找过一些关于拖拽辅助对齐的解决方案。
很可惜，这类需求往往比较“特殊化”，不易于复用。Github上可以找到一些demo，但是可以用于生产环境的，几乎没有。
这半年多以来，项目接近尾声不那么忙。我逐步整理出自己工作中的解决方案，试图打造一款可用于生产环境的拖拽辅助对齐工具。
假模假样的写起了文档，单测。。。今天发布了1.0版本，大家感兴趣的可以了解一下，看看能不能起到一些作用。https://github.com/zcued/reac...

回答：

没有大神呢 ?

回答：

吸附+逃逸两步

回答：

+1

以上是 【Web前端问题】js中拖拽过程中 参考线功能的实现思路 的全部内容， 来源链接： utcz.com/a/138175.html

回到顶部