参考链接：

https://www.jianshu.com/p/d07a623a7369

https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer/getData

https://blog.csdn.net/weixin_44797182/article/details/98455687

元素如果有draggale属性、便可以拖动该元素。首先初始化页面：

DataTransfer.setData()

设置被拖放元素为指定的数据和类型。

拖动这个元素时会触发ondragstart事件，修改代码、捕获这个event，设置被拖动元素的数据:

DataTransfer.getData()

获取被拖放元素的数据。HTML5开始要求至少需要一个参数，否则会报错。

将元素拖入容器中

需要将容器绑定ondragover事件。ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，需要使用e.preventDefault() 方法

放置元素

需要将容器绑定ondrop事件

修改代码如下：