React-dnd: ¿Cómo saber "isDragging" dentro de un "DropTarget"?

Creado en 1 feb. 2016  ·  4Comentarios  ·  Fuente: react-dnd/react-dnd

Quiero mostrar los destinos de colocación cuando se arrastra alguna fuente y ocultar todos los destinos cuando no se arrastra nada.
Sin embargo, el monitor isDragging solo se proporciona como fuente.
¿Alguna forma de saber isDragging dentro de un DropTarget ?

question

Comentario más útil

Dado que se requiere que la fuente devuelva un artículo cuando beginDrag, implementé una versión funcional de isDragging como esta:

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 gracias por el ejemplo de referencia. ¡Lo veré!

Todos 4 comentarios

Verificaría la fuente para el ejemplo Simple Sortable . Parece que quieres hacer algo similar a lo que hicieron con hover en cardTarget.

Dado que se requiere que la fuente devuelva un artículo cuando beginDrag, implementé una versión funcional de isDragging como esta:

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 gracias por el ejemplo de referencia. ¡Lo veré!

Mirando su código, puede definir una función hover () dentro de su objeto widgetTarget existente. Tendrá la firma hover(props, monitor, component) , que puede usar como desee.

Puede comprobar monitor.getItem() . Si existe, lo estás arrastrando. De otra forma no.

¿Fue útil esta página
0 / 5 - 0 calificaciones