react 实现自定义拖拽hook
前沿最近发现公司的产品好几个模块用到了拖拽功能,之前拖拽组件是通过Html5 drag Api 实现的但体验并不是很好,顺便将原来的拖拽组建稍做修改,写一个自定义hook,方便大家使用拖拽功能。正文拖拽功能原理:拖拽元素通过addEventListener监听器添加鼠标按下,鼠标移动,以及鼠标抬起事件。再通过getBoundingClientRect() 得到拖拽元素四周相对于可拖拽区域边界的距离。鼠标移动时计算x轴和y轴的移动偏移量。通过element.style.transform 设置
原创
2022-03-12 00:08:41 ·
1853 阅读 ·
3 评论