react-dnd：行をドラッグアウト

Question

ドラッグアンドドロップでグラフを作成できるようにするコンポーネントを構築しています。

ノードの出力から次のノードの入力側にドラッグすることでエッジを作成できるようにする必要があります。厳密に言えば、これはドラッグアンドドロップではない。なぜなら、ドラッグ可能な状態が維持されているからであり、代わりに、アクティブなターゲット上にマウスを乗せたままユーザがリリースされるまで、ドラッグ可能であり、エッジが完成する。

ドラッグアンドドロップと思われるほぼすべてが欲しいです。ホバー信号が表示され、適格なDraggableがドラッグされているときにドロップターゲットが強調表示されます。私がする方法を理解できない2つのことがあります。 1つはdraggableが全く動かないようにします。私は要素の2つのコピーをもう一方の下に置き、ドラッグプレビューを無効にすることでそれを騙すことができますが、単純なフラグがあればそれが良いでしょう。

もう1つはショーストッパーのようです。私がドラッグすると（私が知っているように）、収集機能はイベントを連続的に発射しません。私は線を更新し続けるためにonMouseMoveを起動する何かが必要です。ドラッグアンドドロップは私が必要とするいくつかのことをしているので、すでにそれに依存するサイズのコストが発生しているので、それを再利用することは素晴らしいことです。

私がこれまで持っていた最高のアイデアはbeginDragにONMOUSEMOVEハンドラをインストールし、drop上の任意の新しいエッジを確立し、endDrag上のラインをきれいにすることです。残念ながら、mousemoveイベントの伝播を止めていると思うのですが、ドラッグを開始するときにbeginDragをここに入力しても、ハンドラが起動しないためです。

Answer 1

私が現在取り組んでいるプロジェクトでは、同じことが（グラフを描き、エッジを反応dndで接続する）同じ問題が発生します。しかし、私は私が

が間違ってドラッグすると、あなたの仮定

コレクト機能が継続的にイベントを発生しないことことに気づきました。最初は私もそう思っていましたが、私の "キャンバス"レンダリング機能が重すぎるので、ディスプレイが乱れる理由が分かりました。 the directionsのレスポンスレンダリング機能を最適化する方法については、ノードレイヤーとリンクレイヤーを別のサブコンポーネントに分割して、変更した場合のみ再レンダリングする方法で問題を解決しました。これにより、私の主なレンダリング機能がはるかに軽くなりました。それから私は私の "保留中の"リンクを描いた。それはスタッター/ジャンクなしで、私のマウスカーソルを美しく追った。

render() { 
    /* 
    Don't do anything heavy in the rendering function (incl, nodelayer and link layer) - even a console.log. 
    Otherwise the pending link render will b e choppy. 
    */ 
    const { renderPendingLink } = this; 
    const { connectDropTarget } = this.props; 
    const canvas = connectDropTarget(<div style={{ width: '100%', height: '1000px' }} ref={ref => this._canvasRef = ref}> 
     <div style={{ position: 'absolute', width: '100%', height: '100%' }}> 
      <NodesLayer nodes={this.nodesValuesArray} createLink={this.createLink} /> 
      <svg style={{ width: '100%', height: '100%' }}> 
       <LinksLayer links={this.linksValuesArray} /> 
       {renderPendingLink()} 
      </svg> 
     </div> 
    </div>) 
    return (<div> 
     <PanelToolboxWidget /> 
     {canvas} 
    </div>) 
} 
} 

そして：ここ

は私のレンダリング機能から何をretrunedされています

@observer class LinksLayer extends React.PureComponent { 
render() { 
    const { links } = this.props; 
    return (<svg> 
     {_.map(links, l => <LinkWidget link={l} key={l.uuid} />)} 
    </svg>) 
} 

}：LinksLayerWidgetは（私はmobXを使用しています）、このようになります

renderPendingLink() { 
    const { item, itemType, isDragging } = this.props; 
    if (isDragging && itemType == ItemTypes.PORT) { 
     const { port } = item; 
     const { currentOffset } = this.props; 
     if (!currentOffset | !this._canvasRef) { 
      return null; 
     } 
     return (
      <PendingLinkWidget 
       start={port.getPortCenterRelativeToCanvas} 
       end={getLocalisedDropCoords(currentOffset, this._canvasRef)} 
      /> 
     ) 
    } 
    return null; 
} 

それは私のために働く、それはあなたを助けることを願っています。