要实现拖动的辅助线功能,有没有什么比较好的推荐
发布于 3 年前 作者 qiushijie 1858 次浏览 来自 问答

拖动用了jquery ui,里面好像没有相应的辅助线api,有没有其他插件或者要自己实现是什么思路呢?

2 回复

自己搜drag and drop即可

我觉得还是自己实现吧,实现起来也不难,就是有点麻烦而已;

我在知乎上有个回答,回答的正好是这个问题,这里简要说一下大概的思路,具体的可以查看知乎的答案: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 = []; }

回到顶部