React-dnd: komponen connectDragPreview() juga ditampilkan sebagai komponen biasa

Dibuat pada 28 Mei 2017 · 3Komentar · Sumber: react-dnd/react-dnd

Mungkin ini kemungkinan duplikat https://github.com/react-dnd/react-dnd/issues/399 .
Ini mungkin perilaku yang diketahui, tetapi akan lebih baik jika hal berikut dapat dicapai:

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

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

Saya ingin komponen pratinjau saya ditampilkan hanya sebagai pratinjau sebenarnya, bukan sebagai komponen biasa.
Tapi ini menunjukkan <div>my preview</div> bawah komponen sebenarnya yang dapat diseret di dalam div 'atas'. Saya tidak ingin itu ditampilkan di sana, tetapi hanya sebagai pratinjau. Bisakah ini dicapai?

wontfix

Sumber

croraf

Semua 3 komentar

Ini dia (gunakan lapisan seret khusus):
https://github.com/react-dnd/react-dnd/blob/master/examples/02%20Drag%20Around/Custom%20Drag%20Layer/CustomDragLayer.js

dan ini adalah bagian kode yang relevan:

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 pada 5 Jun 2017

👍1

Hai
Saya perlu membuat komponen dragPreview khusus di samping komponen dragSource tetapi ketika saya menggunakan kode di atas di componentDidMount(), itu tidak menunjukkan pratinjau saat menyeret.

wiadev pada 23 Apr 2019

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.