【为什么】推荐使用CSS方式实现React侧边栏拖拽

2,183 阅读1分钟

写在前面

侧边栏自由拖拽在中后台项目还算常见,应该有很多实现方案,结果在实现过程中还是花了些实践,跳了一些坑,记录一下以备以后使用;

方案选择

  1. CSS方案。利用onMouseMove计算拖拽距离。

    React 最佳实践:可拖拽侧边栏 - 掘金

  2. react-draggable方案**。**

    基于react-draggable实现边界拖拽功能 - 掘金

react-draggable方案使用过程中跳的坑

  1. 拖动条和侧边栏在拖拽时卡顿、不同步问题

    • 结束点不一致:拖动条本身移动依赖自身的tranform属性,所以配置时需要固定拖动条距左的距离,不能依赖动态设置的宽度/边距/right:0之类属性实现移动;
    • 速度不一致:拖动条默认有动画,而侧边栏宽度没有动画。删除拖动条的动画,或者为侧边栏添加能保持一致的动画。
    • 和鼠标不同步:设置动画导致,所以最后去掉拖动条和侧边栏位置变化动画效果

image.png

  1. 当遇上右侧内容是iframe时,拖动操作粘连不清,不能及时停止

    解决方案是:拖拽遇到iframe时,在iframe上蒙上一层遮罩,拖拽结束时取消,防止拖拽事件被影响。

总结:

  • 使用react-darggable方案比较重,比较复杂;
  • 利用CSS方案方案思路简单,逻辑清晰,便于操作;