一部のソースがドラッグされたときにドロップターゲットを表示し、何もドラッグされていないときにすべてのターゲットを非表示にします。
ただし、 isDragging
モニターはソースに対してのみ提供されます。
isDragging
内のDropTarget
ますか?
SimpleSortableの例のソースを確認します。 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参考例をありがとう。 私はそれをチェックします!
コードを見ると、既存のwidgetTargetオブジェクト内でhover()関数を定義できます。 署名hover(props, monitor, component)
があり、必要に応じて使用できます。
monitor.getItem()
確認できます。 存在する場合は、ドラッグしています。 そうでなければそうではありません。
最も参考になるコメント
beginDragのときにソースがアイテムを返す必要があるため、次のように
isDragging
作業バージョンを実装しました。@wdhorton参考例をありがとう。 私はそれをチェックします!