鍍金池/ 問答/HTML/ React dnd實現(xiàn)拖拽的時候,在目標(biāo)框中如何添加移動的內(nèi)容?

React dnd實現(xiàn)拖拽的時候,在目標(biāo)框中如何添加移動的內(nèi)容?

問題描述

在使用React dnd實現(xiàn)拖拽的時候,在目標(biāo)框中如何添加移動的內(nèi)容?

相關(guān)代碼

Container.js

<Source name={item.name} key={item.id} id={item.id} index={index} icon={item.icon} />

Source.js

return (
  connectDragSource(
    <div className="app-source" style={style}>
      {name}
      <i className={'iconfont ' + icon}></i>
    </div>
  )
  

Target.js

return connectDropTarget(
        // style={style}
        <div className="app-target">
            {isActive ?
                'Hummmm, source!' : 
                'Drag here to order!'
            }
        </div>
    )

clipboard.png

后話

看了兩天的React dnd的文檔也百度了,還是不知道要怎么在目標(biāo)框中添加移動的內(nèi)容,各位大神,誰知道的,指點下,謝謝了~

回答
編輯回答
殘淚

你要轉(zhuǎn)變一下思路。
右側(cè)添加的內(nèi)容應(yīng)該是state中的數(shù)據(jù),而不是左側(cè)的內(nèi)容。
也就是說,被拖的對象(左側(cè))和拖放的目標(biāo)(右側(cè))是兩個不同的state數(shù)據(jù)。
那么可以假設(shè),左側(cè)對象為state.origin = [], 右側(cè)對象為:state.dest = [].
當(dāng)你從左側(cè)拖到右側(cè)時,在state.dest中添加一個state.origin的對象就可以了。

2017年4月30日 16:46