react-dnd实现拖拽效果

最终效果

拖拽.gif

几个概念

• DragSource 用于包装你需要拖动的组件，使组件能够被拖拽（make it draggable）
• DropTarget 用于包装接收拖拽元素的组件，使组件能够放置（dropped on it）
• DragDropContext 用于包装拖拽根组件，DragSource 和 DropTarget 都需要包裹在DragDropContext内

参数说明

 DragSource(type, spec, collect)
 DropTarget (type, spec, collect)

• DragSource和DropTarget各有三个参数

type: 拖拽类型，必填。当 source组件的type 和 target组件的type 一致时，target组件可以接受source组件。
spec: 拖拽事件的方法对象，必填。
collect: 把拖拽过程中需要信息注入组件的 props，接收两个参数 connect and monitor，必填。

具体实现步骤

1. 引入文件

import HTML5Backend from 'react-dnd-html5-backend';
import { DragDropContext, DragSource, DropTarget } from 'react-dnd';

2. 拖拽源组件

拖拽源组件html

<template name="AxisSourceItem">
  <div class="{styles.btnWrap}"><ant-Button type="primary" size="small" disabled="{disabled}">{data.name}<ant-Icon type="plus" /></ant-Button></div>
</template>

拖拽源组件js

// 设置分析指标弹层：拖拽源
const axisListSource = {
  beginDrag(props) {
    return {
      data: props.data,
    };
  }
};

@registerTmpl('AxisSourceItem')
@DragSource(props => props.type, axisListSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging(),
}))
@inject('store')
@observer
class AxisSourceItem extends Component {
  render() {
    const { connectDragSource } = this.props;

    return connectDragSource(tmpls.AxisSourceItem(this.props, {
      styles,
      disabled: this.props.data.status === 1 ? false : true,
    }));
  }
}

3. 拖拽目标组件

拖拽目标组件html

<template name="AxisXTargetArea">
  <span class="{styles.targetArea}">
    <#if {data.name}>
      <ant-Button type="primary" size="small">{data.name}</ant-Button><ant-Icon type="minus" onClick="{deleteXData}"/>
    </#if>
  </span>
</template>

拖拽目标组件js

// 拖拽到的目标组件
const chooseListTarget = {
  drop(props, monitor) {
    props.onDrop(monitor.getItem());
  }
};

// 设置分析指标弹层：拖拽x轴接受区域组件
@registerTmpl('AxisXTargetArea')
@DropTarget(props => props.accepts, chooseListTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  canDrop: monitor.canDrop(),
}))
@inject('store')
@observer
class AxisXTargetArea extends Component {
  constructor() {
    super();
  }

  // 删除x轴选中内容
  @autobind
  deleteXData() {
    this.props.delXData();
  }

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

    return connectDropTarget(tmpls.AxisXTargetArea(this.state, this.props, this, {
      styles,
    }));
  }
}

4. 拖拽组件在根组件中的使用

使用DragDropContext包裹根组件
拖拽结束后交互处理

• html

...
<AxisSourceItem type="bandsDragDrop" data="{this}"/>
...
<AxisXTargetArea accepts="bandsDragDrop" onDrop="{'bandChartX' | onDrop}" data="{dragBandChartX}" delXData="{delXData}"/>
...

• js

@registerTmpl("BandDiagnostic")
@inject("store")
@DragDropContext(HTML5Backend) // 将根组件用拖拽组件包起来
@observer
class BandDiagnostic extends Component {
  ...
  //拖动结束后的操作
  onDrop(index) {
    return (item) => {
      if (index === 'bandChartX') {
        this.setState({
          dragBandChartX: {
            id: item.data.code,
            name: item.data.name,
          }
        });
      } else if (index === 'bandChartY') {
        this.setState({
          dragBandChartY: {
            id: item.data.code,
            name: item.data.name,
          }
        });
      }
    };
  }
  ...
}