μΌλΆ μμ€λ₯Ό λλκ·Ένλ©΄ λκΈ° λμμ νμνκ³ μ무κ²λ λλκ·Ένμ§ μμΌλ©΄ λͺ¨λ λμμ μ¨κΈ°κ³ μΆμ΅λλ€.
κ·Έλ¬λ isDragging
λͺ¨λν°λ μμ€ μ©μΌλ‘ λ§ μ 곡λ©λλ€.
isDragging
λ΄λΆμμ DropTarget
isDragging
λ₯Ό μ μμλ λ°©λ²μ΄ μμ΅λκΉ?
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 μ°Έμ‘° μμ μ κ°μ¬λ립λλ€. λλ κ·Έκ²μ ckeck κ²μ΄λ€!
μ½λλ₯Ό μ΄ν΄λ³΄λ©΄ κΈ°μ‘΄ widgetTarget κ°μ²΄ λ΄μ hover () ν¨μλ₯Ό μ μ ν μ μμ΅λλ€. μνλλλ‘ μ¬μ©ν μμλ hover(props, monitor, component)
μλͺ
μ΄ μμ΅λλ€.
monitor.getItem()
νμΈν μ μμ΅λλ€. μ‘΄μ¬νλ κ²½μ° λλκ·Ένλ κ²μ
λλ€. κ·Έλ μ§ μμΌλ©΄ μλλλ€.
κ°μ₯ μ μ©ν λκΈ
beginDragμ νλͺ©μ λ°ννλ λ° μμ€κ° νμνλ―λ‘ λ€μκ³Ό κ°μ΄
isDragging
μ μλ λ²μ μ ꡬννμ΅λλ€.@wdhorton μ°Έμ‘° μμ μ κ°μ¬λ립λλ€. λλ κ·Έκ²μ ckeck κ²μ΄λ€!