React实现组件的拖拽

加粗样式近期接到了一个使antd的Drawer组件可以拖拽的需求，以前没有写过类似的案例，只能去网上搜索解决方案，发现有挺多react的拖拽的组件，但是项目中不允许随便引用组件，只能使用原生HTML的拖拽方案了。下面记录一下学习的心得：

了解HTML的拖拽

注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。

提示： 链接和图片默认是可拖动的，不需要 draggable 属性。

在拖放的过程中会触发以下事件：

在拖动目标上触发事件 (源元素):

• ondragstart - 用户开始拖动元素时触发
• ondrag - 元素正在拖动时触发
• ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

• ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
• ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
• ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
• ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

动手实现

第一步
先将需要拖拽的元素的draggable设置成true，这样就可以发现你的组件是可以拖拽的但是松开手就回到原来的地方了。

第二步
重写元素的ondragend方法。ondragend是在用户完成元素拖动后触发，可以利用此函数记录用户拖动完后的位置，然后使用定位的方式，将元素定位到此位置，就实现了拖动后改变位置的方法。

const onDragEnd = (e) => {
   
        console.log('dragEnd', e)
        e.preventDefault();
    }
return (
        <div className="App">
            <div draggle={
   true} onDragEnd={
   onDragEnd}>
                这是拖拽的图形
            </div>
        </div>
    );

第三步
需要在此元素的目标元素上，去除拖动后回到原来位置的动画，本文的目标元素的app，读者可以自己判断一下需要拖动的目标元素。

<div className="App"
             onDragOver={
   (e) => {
   
                 e.preventDefault();
             }}>
            <div draggle={
   true} onDragEnd={
   onDragEnd}>
                这是拖拽的图形
            </div>
        </div>

大概的思想就是这些，下面是实现的全部代码：

import './App.css';
import React, {
   useState