提供了如下解决方法：使用createPortal给拖动元素挂在空的父元素上，可参考issue: transform on parent messes up dragging positioning
但是这个方法并不能解决我的问题，因为还有自定义placeholder的需求。在拖拽时还需要计算placeholder的left的距离，也就需要获取当前拖拽元素的parentNode下的子元素，使用createPortal则获取不到拖拽元素的原parentNode，因此放弃createPortal的方案。采用改变width和height达到transform：scale的效果。
移动端拖拽元素需要长按该元素（long-press）
官方文档中给出的说明是，在移动端场景下，在draggable元素上的手指操作，无法确定是tap，force press，或者scroll，所以需要长按该元素才能确定是拖拽。
Starting a drag: long press
A user can start a drag by holding their finger 👇 on an element for a small period of time 🕑 (long press)
拖拽某个元素悬停在目标位置时，空出的插入space距离不准确的问题
这个就是上文中提到的，Draggable之间留的placeholder的空余距离是一个Draggable的距离，但不包括Dragglable的margin边距，可参考这个issue。
最后采用padding来控制Draggable之间的距离，这样在拖拽时空出的space就包括了padding。
react-beautiful-dnd比较容易上手, 到2021年3月发布了v13.1.0较为活跃， 以上踩过的坑，希望对大家有所帮助。
官网beautiful-dnd
react-beautiful-dnd入门教程
到此这篇关于使用react-beautiful-dnd实现列表间拖拽踩坑 的文章就介绍到这了,更多相关react 列表拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: