第一种方式:使用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;
}