React 实现拖拽

拖拽标题及拖拽表头

antd拖拽标题实现添加功能：

import React, { PureComponent } from 'react';
import { Tag, Input, Tooltip, Icon, Card } from 'antd';
import styles from './index.less';

export default class TopTags extends PureComponent {
  state = {
    tags: ['活动名称', '活动项2', '活动项目3', '项目4'],
    tagsTarget: [],
    tragName: '',
  };

  handleClose = removedTag => {
    const tagsTarget = this.state.tagsTarget.filter(tag => tag !== removedTag);
    // console.log(tags);
    this.setState({ tagsTarget });
  };

  //拖拽开始
  tragStart = (e, item) => {
    // console.log("拖拽开始 e,item ", e, item);
    e.dataTransfer.setData('item', JSON.stringify(item)); // 拖拽元素携带的数据
    this.setState({ tragName: item });
  };
  // 拖拽元素经过放置元素时
  dragOver = e => {
    e.preventDefault(); // 此处的代码是必须的  不然无法拖拽
    console.log('拖拽中');
  };

  // 拖拽元素放到放置元素时
  drop = e => {
    e.preventDefault();
    // 放置之后的后续操作
    // console.log("后续操作 e", e);
    const { tagsTarget, tragName } = this.state;
    if (tagsTarget.length < 3 && !tagsTarget.includes(tragName))
      this.setState({ tagsTarget: tagsTarget.concat(tragName) });
  };

  render() {
    const { tags, tagsTarget } = this.state;
    return (
      <Card title="拖动标题添加" bordered={false}>
        <div>
          <Tag style={{ background: '#fff', borderStyle: 'none' }}>
            <Icon type="plus" />
            最多只能添加3个标题
          </Tag>
        </div>

        <Card onDrop={e => this.drop(e)} onDragOver={e => this.dragOver(e)}>
          {tagsTarget.map((tag, index) => {
            const isLongTag = tag.length > 20;
            const tagElem = (
              <Tag key={tag} closable={true} onClose={() => this.handleClose(tag)}>
                {isLongTag ? `${tag.slice(0, 20)}...` : tag}
              </Tag>
            );
            return isLongTag ? (
              <Tooltip title={tag} key={tag}>
                {tagElem}
              </Tooltip>
            ) : (
              tagElem
            );
          })}
        </Card>

        <div>
          {tags.map(item => (
            <Tag key={item} draggable={true} onDragStart={e => this.tragStart(e, item)}>
              {item}
            </Tag>
          ))}
        </div>
      </Card>
    );
  }
}

参考：https://blog.csdn.net/qq8241994/article/details/88747452

react-drag-listview实现拖拽Table表头：

$ cnpm install --save react-drag-listview

const ReactDragListView = require('react-drag-listview');

function countsNum(arr = [], key, value) {
  let counts = 0;
  arr.forEach(item => {
    if (item[key] == value) {
      counts++;
    }
  });
  return counts;
}

// 报表
@connect(({ global, reportQuery, loading }) => ({
  ...global,
  ...reportQuery,
  loading: loading.models.reportQuery,
}))
export default class extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'reportQuery/fetchTable', payload: { start: 0, length: 10 } });
  }

  // 操作表格
  handleTableChange = (pagination, filters, sorter) => {
    // log('handleTableChange', 'pagination=', pagination, 'filters=', filters, 'sorter=', sorter);
    const { searchParams, dispatch } = this.props;
    let { current, pageSize } = pagination;
    const queryParams = {
      ...searchParams,
      start: (current - 1) * pageSize,
      length: pageSize,
    };
    dispatch({ type: 'reportQuery/fetchTable', payload: queryParams });
  };

  // 表头
  columns = () => {
    return [
      {
        title: '活动项',
        dataIndex: 'item',
        key: 'item',
        align: 'center',
        width: '10%',
        filters: [
          {
            text: '未开始',
            value: 'activeStatus1',
          },
          {
            text: '进行中',
            value: 'activeStatus2',
          },
          {
            text: '待审核',
            value: 'activeStatus3',
          },
        ],
        render: (text, record) => {
          const arr = record.item || [];
          const notStartedNum = countsNum(arr, 'activeStatus', '1');
          const processingNum = countsNum(arr, 'activeStatus', '2');
          const notApprovalNum = countsNum(arr, 'approvalStatus', '2');
          return (
            <Fragment>
              {notStartedNum > 0 && (
                <div>
                  <Badge status="warning" text={`未开始(${notStartedNum})`} />
                </div>
              )}
              {processingNum > 0 && (
                <div>
                  <Badge status="processing" text={`进行中(${processingNum})`} />
                </div>
              )}
              {notApprovalNum > 0 && (
                <div>
                  <Badge status="error" text={`待审核(${notApprovalNum})`} />
                </div>
              )}
            </Fragment>
          );
        },
      },
      {
        title: '类型',
        dataIndex: 'TypeCodeName',
        key: 'TypeCodeName',
        align: 'center',
        width: '10%',
        filters: [
          {
            text: '默认活动',
            value: 'TypeCodeName1',
          },
          {
            text: '月度活动',
            value: 'TypeCodeName2',
          },
          {
            text: '单片活动',
            value: 'TypeCodeName3',
          },
        ],
        filterMultiple: false,
      },
      {
        title: '开始时间',
        dataIndex: 'startDate',
        key: 'startDate',
        align: 'center',
        width: '10%',
      },

    ];
  };

  render() {
    const {
      tableList,
      pagination,
      loading,
    } = this.props;

    const dragProps = {
      onDragEnd(fromIndex, toIndex) {
        console.log(fromIndex, toIndex);
      },
      nodeSelector: 'th',
    };
    console.log(ReactDragListView.default.DragColumn);
    return (
      <PageHeaderWrapper style={{ margin: 24 }}>
        <Card bordered={false} style={{ margin: 24 }}>
          <div className={styles.tableList}>
            <ReactDragListView.default.DragColumn {...dragProps}>
              <Table
                dataSource={tableList}
                pagination={pagination}
                columns={this.columns()}
                onChange={this.handleTableChange}
                loading={loading}
                scroll={{ x: 1350 }}
                bordered
              />
            </ReactDragListView.default.DragColumn>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

参考：http://npm.taobao.org/package/react-drag-listview