드래그 할 때만 DnD 스타일을 div 스타일로 변경하십시오.

Question

react-dnd 라이브러리를 사용하여 드래그 앤 드롭 메 커닉을 구현하고 있지만 드롭 방식의 스타일을 지정하기가 어렵습니다. 어떤 드롭 대상을 드롭 할 수 있는지 사용자에게 보여주고 싶지만, isOver과 canDrop을 사용하면 현재 끌리고있는 항목의 스타일 만 지정합니다.
!isOver 값을 사용하면 요소를 드래그하지 않고도 모든 div의 스타일을 조정할 수 있습니다.
드롭 대상의 스타일을 지정하려면 어떻게해야합니까? 요소 끌기가 발생하는 경우 만 발생합니까?
이것은 @DropTarget을 위해 지금까지 내 코드입니다 :

import React from 'react'; 
import {DropTarget} from 'react-dnd'; 
import {ItemTypes} from './Constants'; 

const target = { 
    drop(props, monitor, component){ 
     // console.log("Dropped on", props.id); 
    }, 

    canDrop(props, monitor, component){ 
     var cardColumn = monitor.getItem().column; 
     var targetColumn = props.column; 
     return false; // still testing styling when only an element is being dragged on the page 
    } 

}; 

@DropTarget(ItemTypes.CARD, target, (connect, monitor) => ({ 
    connectDropTarget: connect.dropTarget(), 
    isOver: monitor.isOver({shallow: true}), 
    canDrop: monitor.canDrop(), 
})) 
class CardList extends React.Component{ 
    constructor(props){ 
     super(props); 

     this.addClass = this.addClass.bind(this); 
    } 

    addClass(){ 
     const {isOver, canDrop} = this.props; 
     if(isOver && canDrop){ 
      return "willDrop"; // green background for .card-list 
     } 
     if(isOver && !canDrop){ 
      return "noDrop"; // red background for .card-list 
     } 
     if(!isOver && !canDrop){ 
      return ""; // will style all the backgrounds in a color, but not when dragging 
     } 

    } 

    render(){ 
     const {connectDropTarget} = this.props; 

     return connectDropTarget(
      <div class={"card-list col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " + this.addClass()} id={this.props.id}> 
       {this.props.children} 
      </div> 
     ); 
    } 
} 

export default CardList; 

요소가 페이지에 끌고있는 isDragging 값을 얻을 수있는 방법이 있나요이 내가 원하는 것을 얻을 수있는 유일한 가능성이기 때문에 .
감사합니다.

Answer 1

http://react-dnd.github.io/react-dnd/docs-drop-target-monitor.html마다 isDragging 검사를 암시 적으로 수행합니다. 드래그 작업이 진행중인 경우에만 true를 반환합니다. 따라서 스타일 드롭 대상으로하려는 경우와 같은 드래그 할 수있는 무언가가 드래그되는 경우에만, 나는 당신이 같은 것을 처리하기 위해 다른 사용자의 addClass의 경우() 함수를 필요로 생각 :

addClass(){ 
    const {isOver, canDrop} = this.props; 
    if(isOver && canDrop){ 
     return "willDrop"; // green background for .card-list 
    } 
    if(isOver && !canDrop){ 
     return "noDrop"; // red background for .card-list 
    } 
    if(!isOver && canDrop){ 
     return ""; // THIS BLOCK WILL EXECUTE IF SOMETHING IS BEING DRAGGED THAT *COULD* BE DROPPED HERE 
    } 
} 

을 그리고 난 당신이 원하는 것 같아! isOver & &! canDrop 블록 - 아무 것도 전혀 끌고 있지 않을 때에도 실행됩니다.