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