将同级元素与当前元素一起拖动答案

【问题标题】：Drag sibling element along with the current element将同级元素与当前元素一起拖动
【发布时间】：2020-07-30 14:49:38
【问题描述】：

我处于需要拖动元素及其兄弟元素的情况。可拖动元素的样式如下

<ContainerDiv>

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

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

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

</ContainerDiv>

我无法更改结构以将元素和兄弟元素包装在一个 div 下。当用户拖动element1时，sibling1也应该被拖动。

这里是sandbox。

文件：

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

提前致谢！

【问题讨论】：

标签： javascript reactjs dom drag-and-drop draggable

【解决方案1】：

我使用insertBefore() 节点方法结合反应技巧解决了它。我所做的是，在拖动开始时，我已将当前拖动的下一个兄弟存储在定义拖动方法的父组件或容器中。一旦触发拖动，我先插入拖动元素，然后插入兄弟元素。

我知道这不是最好的解决方案，但这对我来说对第 1 层很有用。我将考虑第 2 层中的优化方法并进行 EDIT - 2。

【讨论】：