简单实现一个h5拖拽技术dome
1.在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。
拖动事件：dragstart、drag、dragend
放置事件：dragenter、dragover、drop
拖拽事件流：当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发dragstart->drag->dragenter->dragover->drop->dragend
2.在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例
方法：setData、getData、clearData
案例 dome
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
height: 200px;
border: 1px solid cyan;
margin: 0 auto;
}
.child {
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
margin: 10px;
}
body {
height: 400px;
}
</style>
<script>
window.onload = function () {
var parent = document.querySelector('.parent');
var childs = document.querySelectorAll('.child');
childs = Array.from(childs);
// console.log(childs);
childs.forEach(function (item) {
//拖放对象
//拖放事件
//开始拖放
item.ondragstart = function (event) {
// console.log('ondragstart');
//console.log(event.dataTransfer);
event.dataTransfer.setData('id', item.id);
};
//正在拖放的事件
item.ondrag = function () {
// console.log('ondrag');
}
//拖放结束
item.ondragend = function () {
// console.log('ondragend');
}
})
//放置对象事件
//将拖放元素 拖放放置 对象中
// 进入目标元素
parent.ondragenter = function (event) {
}
// 在目标元素内活动
parent.ondragover = function () {
//取消事件默认行为
event.preventDefault();
}
// 将拖放元素放置到目标元素内
parent.ondrop = function (event) {
// console.log('ondrop');
var id = event.dataTransfer.getData('id');
// id='one'
var dom = document.querySelector('#' + id);
this.appendChild(dom);
event.stopPropagation();
}
document.body.ondragover = function (event) {
event.preventDefault();
}
document.body.ondrop = function (event) {
var id = event.dataTransfer.getData('id');
var dom = document.querySelector('#' + id);
this.appendChild(dom);
}
}
</script>
</head>
<body>
<div class="parent">
</div>
<div class="child" draggable="true" id="one">1</div>
<div class="child" draggable="true" id="two">2</div>
<div class="child" draggable="true" id='three'>3</div>
<div class="child" draggable="true" id='four'>4</div>
</body>
</html>
效果： 往parent 拖放
往body拖放：
这就是h5简单的拖拽技术
更详细API可以查看MDN文档
HTML 拖放 API - Web API 接口参考 | MDN (mozilla.org)
