React-dnd: Bagaimana cara mengetahui `isDragging` di dalam` DropTarget`?

Dibuat pada 1 Feb 2016 · 4Komentar · Sumber: react-dnd/react-dnd

Saya ingin menampilkan target penurunan ketika beberapa sumber diseret, dan menyembunyikan semua target saat tidak ada yang diseret.
Namun monitor isDragging hanya disediakan untuk sumber.
Adakah cara untuk mengetahui isDragging di dalam DropTarget ?

question

Sumber

gocreating

👍1

Komentar yang paling membantu

Karena sumber diperlukan untuk mengembalikan item ketika beginDrag, saya menerapkan versi kerja isDragging seperti ini:

import React from 'react';
import { ItemTypes } from '../../constants';
import { DropTarget } from 'react-dnd';

const widgetTarget = {
  drop(props) {
    // moveKnight(props.x, props.y);
  }
};

function collect(connect, monitor) {
  const item = monitor.getItem();
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    item: item,
    isDragging: !!item,
  };
}

@DropTarget(ItemTypes.WIDGET, widgetTarget, collect)
export default class WidgetHolder extends React.Component {
  render() {
    const {
      connectDropTarget,
      isDragging,
      isOver,
      item
    } = this.props;
    const style = {
      width: '100%',
      visibility: isDragging? 'visible': 'hidden',
      backgroundColor: isOver? 'green': 'inherit',
    };
    return connectDropTarget(
      <div style={style}>
        Drop here
      </div>
    );
  }
};

@wdhorton terima kasih atas contoh referensi. Aku akan melihatnya!

gocreating pada 1 Feb 2016

👍4

Semua 4 komentar

Saya akan memeriksa sumber untuk contoh Simple Sortable . Sepertinya Anda ingin melakukan sesuatu yang mirip dengan yang mereka lakukan dengan mengarahkan kursor ke cardTarget.

wdhorton pada 1 Feb 2016

Karena sumber diperlukan untuk mengembalikan item ketika beginDrag, saya menerapkan versi kerja isDragging seperti ini:

import React from 'react';
import { ItemTypes } from '../../constants';
import { DropTarget } from 'react-dnd';

const widgetTarget = {
  drop(props) {
    // moveKnight(props.x, props.y);
  }
};

function collect(connect, monitor) {
  const item = monitor.getItem();
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    item: item,
    isDragging: !!item,
  };
}

@DropTarget(ItemTypes.WIDGET, widgetTarget, collect)
export default class WidgetHolder extends React.Component {
  render() {
    const {
      connectDropTarget,
      isDragging,
      isOver,
      item
    } = this.props;
    const style = {
      width: '100%',
      visibility: isDragging? 'visible': 'hidden',
      backgroundColor: isOver? 'green': 'inherit',
    };
    return connectDropTarget(
      <div style={style}>
        Drop here
      </div>
    );
  }
};

@wdhorton terima kasih atas contoh referensi. Aku akan melihatnya!

gocreating pada 1 Feb 2016

👍4

Melihat kode Anda, Anda bisa mendefinisikan fungsi hover () dalam objek widgetTarget yang ada. Ini akan memiliki tanda tangan hover(props, monitor, component) , yang dapat Anda gunakan sesuai keinginan.

wdhorton pada 1 Feb 2016

Anda dapat memeriksa monitor.getItem() . Jika ada, maka Anda sedang menyeret. Jika tidak, tidak.