HTML5拖拽API 实现拖拽组件（React）

1.拖拽和释放定义：

　　拖拽：Drag;

　　释放：Drop;

2.源对象和目标对象：

　　

3.相关API:

　　ondragstart:源对象开始被拖动

　　ondrag:源对象被拖动的过程中

　　ondragend:源对象被拖动结束

　　ondragenter:目标对象被源对象拖动进入

　　ondragover:目标对象被源对象悬浮在上面

　　ondragleave:源对象拖动着离开了目标对象

　　ondrop:源对象拖动着在目标对象上方松手

4.拖动的源对象和目标对象之间的数据传递：

　　源对象数据保存：e.data.Transfer.setData(k,v)//k-v必须都是string类型

　　目标对象获取数据：e.data.Transfer.getData(k,v)

import React from 'react';
import styles from './index.less';

const Index = props => {
  const {} = props;
  let item = null;
  let lastY = null;
  const drag = e => {
    item = e.target;
    item.style.backgroundColor = 'blue';
    lastY = e.clientY;
    e.dataTransfer.setData('Text', item.id);
  };
  const dragEnter = e => {
    e.preventDefault();
    if (e.clientY > lastY) {
      e.target.after(document.getElementById(item.id));
    } else {
      e.target.before(document.getElementById(item.id));
    }
    lastY = e.clientY;
  };
  const drop = e => {
    e.preventDefault();
    const data = e.dataTransfer.getData('Text');
    if (e.clientY > lastY) {
      e.target.after(document.getElementById(data));
    } else {
      e.target.before(document.getElementById(data));
    }
    item.style.backgroundColor = 'red';
    item = null;
    lastY = null;
  };
  const allowDrag = e => {
    e.preventDefault();
  };
  return (
    <div id="wrap" onDrop={drop} onDragOver={allowDrag}>
      <div
        id="div1"
        draggable
        onDragStart={drag}
        onDragEnter={dragEnter}
        className={styles.dragItem}
      >
        1
      </div>
      <div
        id="div2"
        draggable
        onDragStart={drag}
        onDragEnter={dragEnter}
        className={styles.dragItem}
      >
        2
      </div>
      <div
        id="div3"
        draggable
        onDragStart={drag}
        onDragEnter={dragEnter}
        className={styles.dragItem}
      >
        3
      </div>
    </div>
  );
};
export default Index;

SortableJS 功能强大的JavaScript 拖拽库

---

html5的拖拽dragAPI（如果看了API不懂，看看那三个案例就会恍然大悟）

html5 drag api详解