html5实现元素拖拽,实现元素拖拽的两种方式

第一种方式：使用h5的api datatransfer

实现思路：

1.为将要拖拽的元素设置允许拖拽，并赋予dragstart事件将其id转换成数据保存；

2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置，并赋予drop事件进行元素的放置。

代码如下：

.box1 {

width: 100px;

height: 100px;

border: 1px black solid;

margin-bottom: 20px;

background: lightblue;

}

.box2 {

width: 100px;

height: 100px;

border: 1px black solid;

background: lightcoral;

}