將同級元素與當前元素一起拖動

Question

我處於需要拖動元素及其兄弟元素的情況。 可拖動元素的模式將是

<ContainerDiv>

 <Element1 draggable={true} />
 <Sibling1 draggable={true} />

 <Element2 draggable={true} />
 <Sibling2 draggable={true} />

 <Element3 draggable={true} />
 <Sibling3 draggable={true} />

</ContainerDiv>

我無法更改結構以將元素和兄弟姐妹包裝在一個 div 下。 當用戶拖動element1時， sibling1也應該隨之拖動。

這里是沙盒。

文件：

editors.jsx - container
renderWE.jsx - element
renderBlock.jsx - sibling

提前致謝！

Answer 1

我使用insertBefore()節點方法結合反應技巧解決了它。 我所做的是，在拖動開始時，我已將當前拖動的下一個兄弟存儲在定義拖動方法的父組件或容器中。 一旦觸發拖動，我首先插入拖動元素，然后插入兄弟元素。

我知道這不是最好的解決方案，但這對我來說對第 1 層很有用。 我將考慮第 2 層中的優化方法並進行 EDIT - 2。