如何将元素作为子元素放入内部？或如何制作子投放区域？

问题描述

可拖动组件位于以下代码的Drop函数内部，这意味着我可以拖放元素以对其进行重新排序，但是如果我想将元素拖放到其他elmeent中，该怎么办。例如， 看到下面的两个元素

<div>
  maing element
</div>

<div>
   sub element
</div>

当我将一个元素拖放到其他元素上时，它将是ni，其格式如下：

<div>
  maing element
     <div>
        sub element
     </div>
</div>

import React,{ useState } from 'react';
import { DragDropContext,Draggable,Droppable } from 'react-beautiful-dnd'
import Components from '../Actions/Components';
const grid = 8

function DND({ View,elements,BoxStyle,elementsstyle,display,direction }) {

      const [state,set] = useState(elements)
      const [anchorEl,setAnchorEl] = useState(null);

      function Drag() {

            return (
                  <div style={{ display: display }}>
                        {state.map((e,index) => (
                              <div key={index}>{
                                    e.type === 'column' && <Components View={View} Indexing={index} anchorEl={anchorEl} setAnchorEl={setAnchorEl} elementsstyle={elementsstyle} state={state} set={set} e={e} />
                              }
                                    {
                                          e.type !== 'column' && <Draggable key={`${index}`} draggableId={`${index}`} index={index} >
                                                {(provided,snapshot) => (
                                                      <div
                                                            ref={provided.innerRef}
                                                            {...provided.draggableProps}
                                                            {...provided.dragHandleProps}
                                                      >
                                                            <div>
                                                                  <Components style={{ color: 'red' }} View={View} Indexing={index} isDragging={snapshot.isDragging} anchorEl={anchorEl} setAnchorEl={setAnchorEl} elementsstyle={elementsstyle} state={state} set={set} e={e} />
                                                            </div>
                                                      </div>
                                                )}
                                          </Draggable>
                                    }
                              </div>
                        ))}
                  </div>
            )
      }
      function Drop() {
            return (
                  <Droppable droppableId='droppable' direction={direction} >
                        {(provided,snapshot) => (
                              <div
                                    ref={provided.innerRef}
                                    style={{
                                          padding: grid,overflow: 'auto',height: '300px',...BoxStyle
                                    }}
                              >
                                    {Drag(BoxStyle,elementsstyle)}
                                    {provided.placeholder}
                              </div>
                        )
                        }
                  </Droppable >
            )
      }

      function reOrder(r) {
            const x = state
            const [removed] = x.splice(r.source.index,1);
            x.splice(r.destination.index,removed);
            setTimeout(() => {
                  set(x)
            },0)
      }

      return (
            <DragDropContext onDragEnd={reOrder}>
                  {Drop(state,elementsstyle)}
            </DragDropContext >
      )
}
export default DND

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）