React-dnd: Компонент connectDragPreview () также отображается как обычный компонент

Созданный на 28 мая 2017 · 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>
        );
}

Я хочу, чтобы мой компонент предварительного просмотра отображался только как фактический предварительный просмотр, а не как обычный компонент.
Но это показывает, что <div>my preview</div> ниже фактического перетаскиваемого компонента внутри div 'top'. Я не хочу, чтобы это показывалось там, а только как превью. Можно ли этого добиться?

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 5 июн. 2017

👍1

Привет
Мне нужно создать собственный компонент dragPreview рядом с компонентом dragSource, но когда я использую приведенный выше код в componentDidMount (), он не показывает предварительный просмотр при перетаскивании.

wiadev 23 апр. 2019

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.