Question

最近，我一直在与react dnd挣扎，我还没有真正弄清楚应该如何进行。因此，我的应用程序具有两个主要组件“ Sidebar”和“ Canvas”。然后，在侧边栏内，我使用地图从状态中渲染数据。

这是Sidebar.js，我正在使用一些Material-ui组件

function Sidebar(props) {

   let Nodes = props.data.filter(node24 => node24.distribution.imagedescriptor.toLowerCase().includes(props.filter.toLowerCase())
   ).map(node24 => (
     <Node key={node24.distribution.imagedescriptor} primary={node24.distribution.imagedescriptor} />
     ))

return (

  <List>
    {Nodes}
  </List>
);
}

内部节点组件是每个列表项的组件。 Node.js：

class Node extends Component {
  render() {

    return (
      <div>
        <ListItem button key={this.props.key}>
          <ListItemText primary={this.props.primary} />
        </ListItem>
      </div>
    );
  }
}

export default Node;

因此，最终会有一个带有其节点的补充工具栏，而应用程序屏幕的其余部分是画布，这是一个完全空的组件。我要实现的是将任何列表项（节点）拖放到画布中-而不将其从列表中删除。

我已经将dragSource附加到Node组件，并将dragTarget附加到Canvas。之后，由于节点没有默认坐标，我不知道如何进行操作，我可以对其进行修改以移动它们。

如果有人可以给我一个提示以便我继续前进，那将非常重要。到目前为止，我正在附上我的应用程序的屏幕截图。如果需要其他信息，请告诉我。

App - Sidebar & canvas

React-dnd拖动列表项并将其放入另一个组件（无列表）

0 个答案: