使用 React 拖放

Question

我正在使用react-draggable 来实现拖放功能。

我必须将一个组件 (A) 拖到另一个 (B) 中：如何获得与 B 相关的最终 A 位置？

Answer 1

计算每个与屏幕相关的位置并比较

const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();

if(aRect.right > bRect.right) {
    // a start after b
}
if(aRect.top > bRect.top) {
   // a start under b
}

// etc.

Answer 2

您可以通过使用 document.getElementById('') 获取 transform 和 translate 属性来获取组件 A 的位置，并获取 transform 和 translate。 您需要创建一个函数来获取可拖动的 css onDrag。