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>
        );
}

내 미리 보기 구성 요소를 일반 구성 요소가 아닌 실제 미리 보기로만 표시하고 싶습니다.
그러나 이것은 '상단' 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,
      });
    }
  }