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

时间:2018-11-18 13:13:38

标签: javascript reactjs list coordinates react-dnd

最近,我一直在与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

0 个答案:

没有答案