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,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,connectDropTarget } = this.props;


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

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

}

“`

react-dnd helloworld

猜你在找的React相关文章