React-dnd: `DropTarget` λ‚΄λΆ€μ—μ„œ`isDragging`을 μ•„λŠ” 방법은 λ¬΄μ—‡μž…λ‹ˆκΉŒ?

에 λ§Œλ“  2016λ…„ 02μ›” 01일  Β·  4μ½”λ©˜νŠΈ  Β·  좜처: react-dnd/react-dnd

일뢀 μ†ŒμŠ€λ₯Ό λ“œλž˜κ·Έν•˜λ©΄ 놓기 λŒ€μƒμ„ ν‘œμ‹œν•˜κ³  아무것도 λ“œλž˜κ·Έν•˜μ§€ μ•ŠμœΌλ©΄ λͺ¨λ“  λŒ€μƒμ„ 숨기고 μ‹ΆμŠ΅λ‹ˆλ‹€.
κ·ΈλŸ¬λ‚˜ isDragging λͺ¨λ‹ˆν„°λŠ” μ†ŒμŠ€ 용으둜 만 μ œκ³΅λ©λ‹ˆλ‹€.
isDragging λ‚΄λΆ€μ—μ„œ DropTarget isDragging λ₯Ό μ•Œ μˆ˜μžˆλŠ” 방법이 μžˆμŠ΅λ‹ˆκΉŒ?

question

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

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 것이닀!

λͺ¨λ“  4 λŒ“κΈ€

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() 확인할 수 μžˆμŠ΅λ‹ˆλ‹€. μ‘΄μž¬ν•˜λŠ” 경우 λ“œλž˜κ·Έν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. 그렇지 μ•ŠμœΌλ©΄ μ•„λ‹™λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰