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

比眉伴天荒 2023-07-03 03:30 51阅读 0赞

depository：*GraduateFE*

### 1.拖拽和释放定义： ###

拖拽：Drag;

释放：Drop;

### 2.源对象和目标对象： ###

![format_png][]

### 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;

![20200201210301951.gif][]

[SortableJS 功能强大的JavaScript 拖拽库][SortableJS _JavaScript]

--------------------

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

[html5 drag api详解][html5 drag api]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTI4NDM0NS8yMDE4MDkvMTI4NDM0NS0yMDE4MDkyMDE2MjIyNTM4Ny0yNTg5MDUzMjkucG5n?x-oss-process=image/format,png
[20200201210301951.gif]: https://img-blog.csdnimg.cn/20200201210301951.gif
[SortableJS _JavaScript]: http://www.sortablejs.com/
[html5_dragAPI_API]: https://www.cnblogs.com/yangguoe/p/9681692.html
[html5 drag api]: https://www.cnblogs.com/wuya16/p/DragApi.html