hover(props, monitor, component) {
    if (monitor.getItem().column_id === props.column_id) {
      const dragIndex = monitor.getItem().index;
      const hoverIndex = props.index;

      // Don't replace items with themselves
      if (dragIndex === hoverIndex) {
        return;
      }

      // Determine rectangle on screen
      const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();

      // Get vertical middle
      const hoverMiddleY =
        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

      // Determine mouse position
      const clientOffset = monitor.getClientOffset();

      // Get pixels to the top
      const hoverClientY = clientOffset.y - hoverBoundingRect.top;

      // Dragging downwards
      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
        return;
      }

      // Dragging upwards
      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
        return;
      }

      // reorder cards
      const args = {
        hasDropped: false,
        column_id: monitor.getItem().column_id,
        fromCardIndex: dragIndex,
        toCardIndex: hoverIndex
      };
      props.reorderCards(args);
      monitor.getItem().index = hoverIndex;
    }
  }
// reorder cards when hovered if they are in the same column

reorder cards when hovered if they are in the same column
reorder cards when hovered if they are in the same column
hover(props, monitor, component) {
    if (monitor.getItem().column_id === props.column_id) {
      const dragIndex = monitor.getItem().index;
      const hoverIndex = props.index;
      if (dragIndex === hoverIndex) {
        return;
      }
      const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
      const hoverMiddleY =
        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
      const clientOffset = monitor.getClientOffset();
      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
        return;
      }
      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
        return;
      }
      const args = {
        hasDropped: false,
        column_id: monitor.getItem().column_id,
        fromCardIndex: dragIndex,
        toCardIndex: hoverIndex
      };
      props.reorderCards(args);
      monitor.getItem().index = hoverIndex;
    }
  }
hover ( props , monitor , component ) { if ( monitor . getItem ( ) . column_id === props . column_id ) { const dragIndex = monitor . getItem ( ) . index ; const hoverIndex = props . index ; if ( dragIndex === hoverIndex ) { return ; } const hoverBoundingRect = findDOMNode ( component ) . getBoundingClientRect ( ) ; const hoverMiddleY = ( hoverBoundingRect . bottom - hoverBoundingRect . top ) / 2 ; const clientOffset = monitor . getClientOffset ( ) ; const hoverClientY = clientOffset . y - hoverBoundingRect . top ; if ( dragIndex < hoverIndex && hoverClientY < hoverMiddleY ) { return ; } if ( dragIndex > hoverIndex && hoverClientY > hoverMiddleY ) { return ; } const args = { hasDropped : false , column_id : monitor . getItem ( ) . column_id , fromCardIndex : dragIndex , toCardIndex : hoverIndex } ; props . reorderCards ( args ) ; monitor . getItem ( ) . index = hoverIndex ; } }
reorder cards when hovered if they are in the same column
reorder cards when hovered if they are in the same column
// Don't replace items with themselves
 // Determine rectangle on screen
 // Get vertical middle
 // Determine mouse position
 // Get pixels to the top
 // Dragging downwards
 // Dragging upwards
 // reorder cards
