Quero mostrar os destinos de soltar quando alguma fonte é arrastada e ocultar todos os destinos quando nada é arrastado.
No entanto, o monitor isDragging
é fornecido apenas como fonte.
Há alguma maneira de saber isDragging
dentro de um DropTarget
?
Gostaria de verificar a fonte para o exemplo de classificação simples . Parece que você deseja fazer algo semelhante ao que eles fizeram com o foco no cardTarget.
Como a origem é obrigada a retornar um item quando beginDrag, implementei uma versão funcional de isDragging
assim:
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 obrigado pelo exemplo de referência. Eu vou checar!
Olhando para seu código, você pode definir uma função hover () dentro de seu objeto widgetTarget existente. Ele terá a assinatura hover(props, monitor, component)
, que você pode usar como desejar.
Você pode verificar monitor.getItem()
. Se existir, você está arrastando. Caso contrário, não.
Comentários muito úteis
Como a origem é obrigada a retornar um item quando beginDrag, implementei uma versão funcional de
isDragging
assim:@wdhorton obrigado pelo exemplo de referência. Eu vou checar!