react-dnd helloworld

参考文档： https://react-dnd.github.io/react-dnd/examples-sortable-simple.html

核心理解：
1.ItemTypes.CARD, cardTarget, connect
第一个参数是类型，第二个参数是 事件注册，第三个参数是个函数，返回值要注入到组件总的内容

2.beginDrag 的返回值，可以理解为原生的（dataTransfer.setData），设置拖动的数据，传递给hover中使用，（monitor.getItem().index）

3.使用了ES7 的decorator

“`
import React, { Component, PropTypes } from ‘react’;
import { findDOMNode } from ‘react-dom’;
import { DragSource, DropTarget } from ‘react-dnd’;
import ItemTypes from ‘./ItemTypes’;

const style = {
border: ‘1px dashed gray’,
padding: ‘0.5rem 1rem’,
marginBottom: ‘.5rem’,
backgroundColor: ‘white’,
cursor: ‘move’,
};

// dnd 生命的对象 拖动源
const cardSource = {
// 开始拖动
beginDrag(props) {
//monitor.getItem() 的对象
return {
id: props.id,
index: props.index,
};
},
};

// 拖动目标 事件
const cardTarget = {
// hover
// props 当前组件的属性
// monitor 拖动中的对象
// componet 当前组件

hover(props, monitor, component) {

    // 当前拖动的index
    const dragIndex = monitor.getItem().index;

    // 当前hover 的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;

    // Only perform the move when the mouse has crossed half of the items height
    // When dragging downwards, only move when the cursor is below 50%
    // When dragging upwards, only move when the cursor is above 50%

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

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

    // Time to actually perform the action
    props.moveCard(dragIndex, hoverIndex);

    // Note: we're mutating the monitor item here!
    // Generally it's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.
    // 新的位置
    monitor.getItem().index = hoverIndex;
},

};

// 声明放下
@DropTarget(ItemTypes.CARD, cardTarget, connect => ({
connectDropTarget: connect.dropTarget(),
}))
// 声明拖动 第三个参数 返回值会注入到对象中
@DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging(),
}))
export default
class Card extends Component {
static propTypes = {
connectDragSource: PropTypes.func.isRequired,
connectDropTarget: PropTypes.func.isRequired,
index: PropTypes.number.isRequired,
isDragging: PropTypes.bool.isRequired,
id: PropTypes.any.isRequired,
text: PropTypes.string.isRequired,
moveCard: PropTypes.func.isRequired,
};

render() {

    //   isDragging, connectDragSource, connectDropTarget  是 注入的
    // text 是父亲传递进来的
    const { text, isDragging, connectDragSource, connectDropTarget } = this.props;


    // 是否是isDragging
    const opacity = isDragging ? 0 : 1;

    return connectDragSource(connectDropTarget(
        <div style={{ ...style, opacity }}>
            {text}
        </div>,
    ));
}

}

“`