关于一个拖拽移动的组件的封装

import React from 'react';
import Card from './Card';

class DragList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { ...props };
  }

  dragStart(e) {
    this.dragged = e.currentTarget;
  }
  dragEnd(e) {
    this.dragged.style.display = 'block';

    e.target.classList.remove('drag-up');
    // eslint-disable-next-line no-unused-expressions
    this.over && this.over.classList.remove('drag-up');

    e.target.classList.remove('drag-down');
    // eslint-disable-next-line no-unused-expressions
    this.over && this.over.classList.remove('drag-down');


    let data = this.state.data;
    const from = Number(this.dragged.dataset.id);
    const to = Number(this.over.dataset.id);
    console.log('from - to ', from, to);
    data.splice(to, 0, data.splice(from, 1)[0]);
    console.log('from - to - data ', data);
        // set newIndex to judge direction of drag and drop
    data = data.map((doc, index) => {
      // eslint-disable-next-line no-param-reassign
      doc.newIndex = index + 1;
      return doc;
    });

    this.setState({ data });
    this.props.onDragEndUpdate(data);
  }

  dragOver(e) {
   // debugger
    console.log(e.target);
    e.preventDefault();

    this.dragged.style.display = 'none';

    if (e.target.tagName !== 'LI') {
      return;
    }

        // 判断当前拖拽target 和 经过的target 的 newIndex

    const dgIndex = JSON.parse(this.dragged.dataset.item).newIndex;
    const taIndex = JSON.parse(e.target.dataset.item).newIndex;
    const animateName = dgIndex > taIndex ? 'drag-up' : 'drag-down';


    if (this.over && e.target.dataset.item !== this.over.dataset.item) {
      this.over.classList.remove('drag-up', 'drag-down');
    }

    if (!e.target.classList.contains(animateName)) {
      e.target.classList.add(animateName);
      this.over = e.target;
    }
  }
  render() {
    // eslint-disable-next-line react/prop-types
    const { onCardDelete, onCardEdit, onInputChange } = this.props;
    const listItems = this.state.data.filter(q => q.type !== 'richText').map((item, i) => {
      return (
        <li
          data-id={i}
          key={i}
          style={{ height: 'auto', margin: '10px 8.5%' }}
          draggable="true"
          onDragEnd={this.dragEnd.bind(this)}
          onDragStart={this.dragStart.bind(this)}
          data-item={JSON.stringify(item)}
        >
          <Card
            value={item.value}
            onInputChange={onInputChange}
            newIndex={item.newIndex}
            idx={i}
            cardType={item.type}
            cardTitle={item.cardTitle}
            cardPrice={item.cardPrice}
            onDelete={onCardDelete}
            onEdit={onCardEdit}
            cardImgId={item.cardImgId}
            id={item.id}
            packIdEn={item.packIdEn}
          />
        </li>
      );
    });
    return (
      <ul onDragOver={this.dragOver.bind(this)} className="contain">
        {listItems}
      </ul>
    );
  }
}

export default DragList;

<DragList
             onInputChange={this.onCardInputChange}
             key={this.state.dragListKey}
             data={this.state.data}
             onCardDelete={this.onCardDelete}
             onCardEdit={this.onCardEdit}
             onDragEndUpdate={this.onDragEndUpdate}
           />

class DraggbleItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
		// 索引
      idx: null,
			// 排序序号
      no: null,
			// 索引存储
      val: null,
      // 判断是不是已处于点击或拖拽状态
      down: false,
      deltaScale: 0.0,
      v: 0,
      clicked: 0,
      posScale: 1,
      z: 1,
      y: 0,
      posy: 0,
      newPos: 0,
      // y轴方向的阴影
      yaxisShadow: 1,
      // 模糊程度
      shadowDim: 2,
      deltaYaxisShadow: 0,
      deltaShadowDim: 0,
      ps1: 0,
      ps2: 0,
    };
	// 绑定this
    this.animate = this.animate.bind(this);
    ...
		...
    this.handleTouchMove = this.handleTouchMove.bind(this);
  }

  componentWillMount() {
    this.setState({
      idx: this.props.idx,
      val: this.props.idx,
      y: this.props.idx * 100,
      no: this.props.idx,
    });
  }

  componentDidMount() {
    // 注册动画
    this.startLoop();
  }

  componentWillReceiveProps(newProps) {
    if (!this.state.down) {
      this.setState({
        idx: newProps.idx,
        val: newProps.idx,
      });
    }
  }

   componentWillUnmount() {
    // 解绑动画
    this.stopLoop();
   }

// pc的开始托转
  handleDown(e) {
    this.setState({
      down: true,
      z: 4,
      posy: e.clientY,
    });
  }
// 移动端开始拖拽
  handleTouchStart(e) {
    e.persist();
    this.setState({
      down: true,
      z: 4,
      posy: e.touches[0].screenY,
    });
  }
	// pc结束拖拽
  handleUp() {
    this.setState({
      down: false,
    });
  }
	// 移动端结束拖拽
  handleTouchEnd() {
    this.setState({
      down: false,
    });
  }
	// pc拖拽过程
  handleMove(e) {
    this.moveHandler(e,'move')   
  }
	// 移动端拖拽过程
  handleTouchMove(e) {
    e.persist();
    this.moveHandler(e,'touch')
  }
	 // 根据type判断pc还是移动端
  getTargetByType=(e,type)=>{
    return type==='touch'? e.touches[0].screenY:e.clientY
  }
  moveHandler = (e, type) => {
    // 如果已经点击
    if (this.state.down) {
      // 移动的距离 减去初始距离
      let newPos = this.getTargetByType(e, type) - this.state.posy;
      // y是最终距离 val是第几个方块
      this.setState(
        {
          y: this.state.val * 100 + newPos,
        },
        () => {
          // 如果移动的距离 大于一半距离 下移
          console.log('this.state.y', this.state.y, 'this.state.idx * 100', this.state.idx * 100);
          if (this.state.y > this.state.idx * 100 + 50) {
            if (this.state.idx + 1 < this.props.cardLength) {
              this.setState(
                {
                  idx: this.state.idx + 1,
                },
                () => {
                  this.props.handlePos(
                    this.state.no,
                    this.state.idx,
                    this.state.idx - 1,
                  );
                },
              );
            }
            // 上移
          } else if (this.state.y < this.state.idx * 100 - 50) {
            if (this.state.idx - 1 > -1) {
              this.setState(
                {
                  idx: this.state.idx - 1,
                },
                () => {
                  this.props.handlePos(
                    this.state.no,
                    this.state.idx,
                    this.state.idx + 1,
                  );
                },
              );
            }
          }
        },
      );
    }
  };

  // 更新拖拽缩放大小
  updateScale() {
  ..........
  }
  // 更新拖拽时y方向的位置
  updateYaxis() {
 ..........
  }
	
	// 动画开始
  startLoop() {
    if (!this._frameId) {
      this._frameId = window.requestAnimationFrame(this.animate);
    }
  }

  animate() {
    this.updateScale();
    this.updateYaxis();
    this.updateShadow();
    const cardDom = document.getElementById('card' + this.state.no);
    cardDom && (cardDom.style.transform =
      ' translate3d(0px ,' +
      this.state.y +
      'px, 0px)scale(' +
      this.state.posScale +
      ')');
    cardDom && (cardDom.style.zIndex = this.state.z);
    cardDom && (cardDom.style.boxShadow =
      'rgba(0, 0, 0, 0.2) 0px ' +
      this.state.yaxisShadow +
      'px ' +
      this.state.shadowDim +
      'px 0px');
    this.frameId = window.requestAnimationFrame(this.animate);
  }

  stopLoop() {
    window.cancelAnimationFrame(this._frameId);
  }

  render() {
    return (
      <div
        id={'card' + this.state.no}
        className={draggable.card}
        onMouseDown={this.handleDown}
        onMouseUp={this.handleUp}
        onMouseMove={this.handleMove}
        onMouseLeave={this.handleUp}
        onTouchStart={this.handleTouchStart}
        onTouchMove={this.handleTouchMove}
        onTouchEnd={this.handleTouchEnd}
      >
        {this.props.children}
       <div className={draggable.close} onClick={this.props.onDelete(this.state.no)}></div>
      </div>
    );
  }
}