写在前面
侧边栏自由拖拽在中后台项目还算常见,应该有很多实现方案,结果在实现过程中还是花了些实践,跳了一些坑,记录一下以备以后使用;
方案选择
-
CSS方案。利用onMouseMove计算拖拽距离。
-
react-draggable方案**。**
react-draggable方案使用过程中跳的坑
-
拖动条和侧边栏在拖拽时卡顿、不同步问题
- 结束点不一致:拖动条本身移动依赖自身的tranform属性,所以配置时需要固定拖动条距左的距离,不能依赖动态设置的宽度/边距/right:0之类属性实现移动;
- 速度不一致:拖动条默认有动画,而侧边栏宽度没有动画。删除拖动条的动画,或者为侧边栏添加能保持一致的动画。
- 和鼠标不同步:设置动画导致,所以最后去掉拖动条和侧边栏位置变化动画效果。
-
当遇上右侧内容是iframe时,拖动操作粘连不清,不能及时停止
解决方案是:拖拽遇到iframe时,在iframe上蒙上一层遮罩,拖拽结束时取消,防止拖拽事件被影响。
总结:
- 使用react-darggable方案比较重,比较复杂;
- 利用CSS方案方案思路简单,逻辑清晰,便于操作;