React-dnd: monitor.getClientOffsetをDropTargetに接続しても、小道具は更新されません

ああ、良い点。 そうです、私はこの使用法を予期していませんでした。 現在、クライアントオフセットの追跡をオプトインする唯一の方法は、 DragLayerを使用することです。 それ以外の場合、パフォーマンス上の理由から、_dropターゲット自体_に関する何かが変更された場合にのみ小道具を更新します。

これはAPIの問題だと思いますが、いくつかの解決策があるかもしれません。

• collect関数内からgetClientOffset()および同様のメソッドに到達することを禁止し、代わりにDragLayerを使用するように指示します（簡単ですがばかげています）。
• この場合、ユーザーがオフセットを追跡し、オフセットの変更をサブスクライブすることを望んでいることを自動的に把握します（より困難ですが、より一貫性があります）。

私は2番目のオプションを行うPRを受け入れると思います。 DragLayer実装をチェックして、オフセットの変更をどのようにサブスクライブするかを確認できます。

2番目のオプションを調べましたが、collectは関数であるため注意が必要です。そのため、どのモニター関数が呼び出されるかを見つけることは不可能/簡単ではありません。

私のユースケースは、場所にスナップされたウィジェットをドラッグして、他のウィジェットを比較的複雑な方法で移動させることです（Androidでプログラムアイコンをドラッグすることを考えてください）。 正確なホバー位置に応じてそれ自体を再配置する必要があるのは実際にはターゲットですが、ドラッグ自体はHTML5スナップショットとして完全に問題ありません。 ターゲットスペックのホバーでターゲットコンポーネントの状態を更新することでそれを行うことができます。 それで、私は今のところこれを残して、それを回避します。 素晴らしいライブラリをありがとう。 私は非常に数時間の仕事でまともな仕事をしています。

とりあえずこれを開いたままにしましょう。 ＃172と同じです。 canDropまたは収集関数内でデルタを使用する人は予想していませんでした。 これをすぐに修正するつもりはありませんが、1か月かそこらで解放された後かもしれません。

私もこの問題に遭遇しました。 クライアントがDropTarget仕様にフラグを渡して、オフセット変更をサブスクライブできるようにすることについてどう思いますか？ これはユーザーにとってもう1つの「落とし穴」ですが、オフセットを手動でサブスクライブ/サブスクライブ解除するよりも簡単です。

RxJS-DOMを使用して、要素のドラッグオーバーイベントを監視し、マウス座標で状態を更新することはできませんか？ おそらくハッキーな解決策。

  componentDidMount() {
    this._events.dragOver = DOM.fromEvent(findDOMNode(this.refs.grid), 'dragover')
                            .throttle(200)
                            .subscribe(this.getMouseCoords)
  }

結局、モニターをつかんで、DragLayerのようなオフセット変更をサブスクライブしました。 また、場所によっては内部レジストリを利用することになりました。 私がやりたいことは_あまりにも_珍しいことではないと思うので、IMOは単純なAPIの変更で対処できます。

これから何かが来ましたか？ カスタムドラッグレイヤーではなくDropTargetでクライアントオフセットを監視したいのは、カスタムドラッグレイヤーではなくDropTargetからホバー位置にアクセスできる方が、DropTargetの構造を変更しやすいと感じたためです。

+ 1 @ jchristmanがやろうとしていることを正確にやりたいです。

+1。 これに遭遇し、getClientOffset（）がcanDrop（）で正常に機能する理由を理解しようとして多くの時間を無駄にしています-これは繰り返し呼び出されます...-しかし、私たちがいるアイテムの「どこ」で私のコントロールに転送する方法はありません。 ツリーノードの「上」だけでなく、ツリーノードの上下に挿入できる必要があります。 canDrop（）には、ノードが持つ多くの「タイプ」のドロップのどれをコンポーネントに実際に伝えて、それに応じてコントロールを再表示できるようにする方法がありません。 canDropで小道具を変更すると、エラーが発生しました。 onMouseMoveのサブスクライブは、ドラッグアンドドロップ操作中には機能しません。 これはこれまでのところ時間の大きな無駄でした...どんな助けもいただければ幸いです。

@ibash 、問題を解決するために行ったことの要点を投稿して

ホバーの使用に切り替えると、ついにそれができました。

`ホバー:(小道具：MyProps、モニター：DropTargetMonitor、コンポーネント：ReportItemRow）=> {
if（component！= null）{
const clientOffset = monitor.getClientOffset（）;

        // Is the dragging node dragged above/below us as opposed to "on" us?

        const elementRect = document.elementFromPoint(clientOffset.x, clientOffset.y).getBoundingClientRect();

        const percentageY = (clientOffset.y - elementRect.top) / elementRect.height;

        // Divide the box up into .25 .5 .25
        const insertDragAndDropMagnetPercent = .25;

        if (insertDragAndDropMagnetPercent >= percentageY) {
            component.setState({ dropTarget: "above" });
        }
        else if (1 - insertDragAndDropMagnetPercent >= percentageY) {
            component.setState({ dropTarget: "inside" });
        }
        else {
            component.setState({ dropTarget: "below" });
        }
    }
},`

@ noah79 、ツリーノードの下に置くことで問題を解決できます。 このようなもの：

         _____
         _____| <-- drop div1 (above treenode1/below top of list)
treenode1_____| <-- drop div2 (on treenode1)
         _____| <-- drop div3 (below treenode1/above treenode2)
treenode2_____| <-- drop div4 (on treenode 2)
         _____| <-- drop div5 (below treenode2/above bottom of list)

最終的に2n + 1のドロップターゲットになります。ここで、nはリスト内の要素の数です。 次に、どのdivにカーソルを合わせるかに基づいて、ツリーリストの外観を変更できます。 今のところgetClientOffset（）にアクセスできないことを回避するために、これと非常によく似た処理を実行しましたが、パフォーマンスへの影響には気づきませんでした。 各ドロップdivの高さはtreenode1ラインの高さの1/2であり、最初のドロップdivは最初のラインよりもtreenode1ラインの高さの1/4高い位置にある必要があります。 つまり、CSSは次のようになります。

.dropdiv-container {
    position: absolute;
    top: -0.25em; /* If the top of this container is aligned with the top of the treenode list initially */
}
.dropdiv {
    height: 0.5em; /* If the height of treenode1 line is 1em with no padding */
}

<div className='dropdiv-container'>
    { renderDropTargets(2 * listLength + 1) }
</div>

それは理にかなっていますか？

これが私がこれをどのように解決したかの要点です。 秘訣はただ手を伸ばすことです
react-dnd internalsを使用して、グローバルモニターを直接使用します。 見てください
DragDropMonitor.jsソースを使用して、使用可能なメソッドを確認してください。
参照： https ：

あなたはコーヒースクリプトを許さなければならないでしょう:)

  # in the component being dragged, get access to the dragDropManager by adding
  # it to the contextTypes
  #
  # dragDropManager is an instance of this:
  # https://github.com/gaearon/dnd-core/blob/master/src/DragDropManager.js

  <strong i="11">@contextTypes</strong>: {
    dragDropManager: React.PropTypes.object
  }

  # because we can receive events after the component is unmounted, we need to
  # keep track of whether the component is mounted manually.
  #
  # <strong i="12">@_monitor</strong> is what lets us access all the nice internal state - it is an instance of this:
  # https://github.com/gaearon/dnd-core/blob/master/src/DragDropMonitor.js

  componentWillMount: () =>
    <strong i="13">@_isMounted</strong> = true
    <strong i="14">@_monitor</strong> = @context.dragDropManager.getMonitor()

    <strong i="15">@_unsubscribeToStateChange</strong> = @_monitor.subscribeToStateChange(@_onStateChange)
    <strong i="16">@_unsubscribeToOffsetChange</strong> = @_monitor.subscribeToOffsetChange(@_onOffsetChange)

  componentWillUnmount: () =>
    <strong i="17">@_isMounted</strong> = false
    <strong i="18">@_monitor</strong> = null

    @_unsubscribeToStateChange()
    @_unsubscribeToOffsetChange()

  # we can access dragging / dropping state by accessing the monitor 

  _onStateChange: () =>
    return unless <strong i="19">@_isMounted</strong>

    # When we stop dragging reset the counter state and hide all cursors.
    if <strong i="20">@_previousIsDragging</strong> && !@_monitor.isDragging()
      console.log('no longer dragging')
    <strong i="21">@_previousIsDragging</strong> = @_monitor.isDragging()

  _onOffsetChange: () =>
    return unless <strong i="22">@_isMounted</strong>

    # mouse is the x/y coordinates
    mouse = @_monitor.getClientOffset()

    # item is the drag item
    item = @_monitor.getItem()

    # if you want to check if a dragged item is over a target, you need the
    # targetId -- in the DropTarget wrapper you can pass it in like:
    #
    #   (connect, monitor) ->
    #     {
    #       targetId: monitor.targetId,
    #       connectDropTarget: connect.dropTarget()
    #     }
    #
    # and then you can use it like below

    @_monitor.isOverTarget(@props.targetId))

これは意味がありますか？ そうでない場合は、詳細を追加できます

私も今日これに遭遇し、数時間を無駄にしました。 DropTarget->収集機能の下のドキュメントにそれについてのメモを残すのはどうですか？ それは少なくとも他の何人かを欲求不満のために惜しまないでしょう。

ところで。 この問題に関するもう1つの本当に醜いハックは、 dropTarget.hover()から_状態として_座標を送信することです。

const dropTarget = {
    hover(props, monitor, component) {
        // HACK! Since there is an open bug in react-dnd, making it impossible
        // to get the current client offset through the collect function as the
        // user moves the mouse, we do this awful hack and set the state (!!)
        // on the component from here outside the component.
        component.setState({
            currentDragOffset: monitor.getClientOffset(),
        });
    },
    drop() { /* ... */ },
};

もちろん、そのようなsetStateの悪用を回避する、これを行うためのより正しい方法はたくさんあります。 しかし、少なくともこの小さなハックは非常に凝縮されており、この問題が最終的に修正されるまで機能する可能性があります。 他のコンポーネントやファイルを変更したり、ライブラリの内部に依存したりすることなく、バグをハックできます。

編集：これは基本的にnoah79と同じです、私は今まで彼のコードを読んでいませんでした。

ドロップ時にマウスの位置を取得する方法は本当にありませんか？ 私のターゲットコンポーネントはそれについて知る必要がないので、 setStateは私にとってオプションではありません。 reduxアクションをトリガーするために必要なのは座標だけです。

私の最後のメッセージは無視してください。 dropとendDragは2つの異なる機能であり、 drop内でのカーソル位置の取得は期待どおりに機能することがわかりました。 :)

私のテストによると、react-dndは、アイテムがターゲット上にドラッグされるとすぐにマウス移動イベントを消費します。 html-backendがこのイベントを消費しない可能性がある場合、isOverプロパティがtrueに設定されていると、ターゲットコンポーネントは通常のmousemoveリスナーを条件付きでそのdomに配置できます。 その後、このリスナーは、何かがマウスの上にドラッグされているときに、（通常の方法で）マウスの位置を取得できます。 私はこれをdrag（）メソッドからsetStateを使用して一時的に機能させました。reactはレンダリング遷移の途中で状態を設定することについて警告を出します。

これも私をつまずかせた。 APIソリューションの場合は+1、または少なくともFAQの何か。

これをサポートする計画はありますか？
ハックのない回避策のアイデアがあります。 DropTargetラッパーを作成し、 hoverをラップして、収集関数への別の呼び出しをトリガーし、収集関数が新しい値を返した場合に再レンダリングします。 。

この問題の+1。 私が持っているユースケースは、互いに近接しているいくつかのドロップターゲットがあることです。 ホバーすると、適切なドロップターゲットが強調表示されますが、実際にドロップすると、ホバーした方向に応じて、より低いターゲットにドロップするのは奇妙に思えます。

オフセットが更新されない理由を調査しているこの問題に遭遇しましたが、まだ回避策が必要なようです。
@ jedwards1211のアイデアを取り上げ、これが私が思いついたものです。 HOCのインターフェースはバニラDropTargetとほぼ同じですが、オプションでcollectRapidlyを受け入れます。これは、収集関数を介してクエリを実行する小道具のリストであり、すべてのホバーイベントに渡されます。 すべての小道具を収集関数から無差別に渡すと、奇妙なことが起こり、 connectをコレクターに渡すことができなくなるため、 connectDropTarget 「迅速に」クエリすることを防ぐことができます。

だから、代わりにDropTarget(types, target, collect)あなたが使用するRapidFireDropTarget(types, target, collect, {collectRapidly: ['offset']}) 、 offset 、おそらくから値を受け取るものですmonitor.getOffset関数ファミリを。

import React from 'react';
import {DropTarget} from 'react-dnd';
import pick from 'lodash/pick';

function RapidFireDropTarget(types, spec, collect, options={}) {
  let collectProps = {};
  const prevHover = spec.hover;
  const {collectRapidly = []} = options;

  const dummyConnect = {
    dropTarget: () => () => {
      throw new Error('Rapidly collected props cannot include results from `connect`');
    }
  };

  const WrappedComponent = Component => {
    return class extends React.Component {
      render() {
        return <Component {...this.props} {...collectProps} />;
      }
    };
  };

  spec.hover = (props, monitor, component) => {
    const allCollectProps = collect(dummyConnect, monitor);

    collectProps = pick(allCollectProps, collectRapidly);
    component.forceUpdate();

    if (prevHover instanceof Function) {
      prevHover(props, monitor, component);
    }
  }

  return (Component) => {
    return DropTarget(types, spec, collect, options)(WrappedComponent(Component));
  };
}

export default RapidFireDropTarget;

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。