React-dnd: connectDragPreview（）コンポーネントも通常のコンポーネントとして表示されます

作成日 2017年05月28日 · 3コメント · ソース: react-dnd/react-dnd

たぶん、これはhttps://github.com/react-dnd/react-dnd/issues/399の複製である可能性があり
これはおそらく既知の動作ですが、次のことが達成できれば良いでしょう。

render () {
        const { connectDragSource, connectDragPreview, isDragging } = this.props;

        return (
            <div className='top'>
                <div>Ordinary</div>
                {connectDragSource (<div>Dragabble</div>)}
                {connectDragPreview (<div>my preview</div>)}
            </div>
        );
}

プレビューコンポーネントを通常のコンポーネントとしてではなく、実際のプレビューとしてのみ表示したい。
しかし、これは 'top'div内の実際のドラッグ可能なコンポーネントの下に<div>my preview</div>示しています。そこに表示したくありませんが、プレビューとしてのみ表示します。これは達成できますか？

wontfix

ソース

croraf

全てのコメント3件

これが（カスタムドラッグレイヤーを使用）です：
https://github.com/react-dnd/react-dnd/blob/master/examples/02%20Drag%20Around/Custom%20Drag%20Layer/CustomDragLayer.js

これはコードの関連部分です：

import { getEmptyImage } from 'react-dnd-html5-backend';

componentDidMount() {
    // Use empty image as a drag preview so browsers don't draw it
    // and we can draw whatever we want on the custom drag layer instead.
    if (this.props.connectDragPreview) {
      this.props.connectDragPreview(getEmptyImage(), {
        // IE fallback: specify that we'd rather screenshot the node
        // when it already knows it's being dragged so we can hide it with CSS.
        captureDraggingState: true,
      });
    }
  }

maierson 2017年06月05日

👍1

やあ
dragSourceコンポーネントの横にカスタムdragPreviewコンポーネントを作成する必要がありますが、componentDidMount（）で上記のコードを使用すると、ドラッグ中にプレビューが表示されません。

wiadev 2019年04月23日

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

stale[bot] 2019年07月06日

👎2

このページは役に立ちましたか？

0 / 5 - 0 評価

React-dnd: connectDragPreview（）コンポーネントも通常のコンポーネントとして表示されます

全てのコメント3件

関連する問題