Я хочу показывать цели перетаскивания, когда какой-то источник перетаскивается, и скрывать все цели, когда ничего не перетаскивается.
Однако монитор isDragging
предоставляется только для источника.
Есть ли способ узнать isDragging
внутри DropTarget
?
Я бы проверил источник для примера Simple Sortable . Похоже, вы хотите сделать что-то похожее на то, что они сделали с наведением курсора в cardTarget.
Поскольку источник требуется для возврата элемента при beginDrag, я реализовал рабочую версию isDragging
следующим образом:
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 спасибо за справочный пример. Я проверю!
Глядя на свой код, вы можете определить функцию hover () в существующем объекте widgetTarget. У него будет подпись hover(props, monitor, component)
, которую вы можете использовать по своему усмотрению.
Вы можете проверить monitor.getItem()
. Если он существует, значит, вы тащите. В противном случае нет.
Самый полезный комментарий
Поскольку источник требуется для возврата элемента при beginDrag, я реализовал рабочую версию
isDragging
следующим образом:@wdhorton спасибо за справочный пример. Я проверю!