1. 什么是拖拽事件？
h5实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽传递数据。拖拽事件是指鼠标按住目标元素，放置到放置元素中 。
本次案例中，不仅要实现拖拽的动态变化，也要在html结构中实现：在放置元素中插入被放置元素的节点。
拖拽需要有两个事件完成：
拖动事件： dragstart、drag、dragend
放置事件： dragenter、dragover、drop
拖拽事件流:
拖动元素到目标元素上时，事件的发生是有一个顺序的，这就是拖拽事件流：
dragstart(开始拖动)—>drag（正在拖动）---->dragenter（进入目标元素）—>dragover（在目标元素内活动）—>drop（将拖放元素放到目标元素内）—>dragend（拖放结束）
2.如何完成拖拽？
2.1 事件思路
要完成动态的拖拽效果，我们只需根据拖拽事件流给对应的元素设置事件即可。但是要完成拖拽元素在对应的元素中插入节点，需要传输数据。可以通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例。
方法：setData、getData、clearData
2.2 事件实现代码
先搭建好页面结构及设置样式：
<style>
.parent{
height: 200px;
border: 2px solid cyan;
}
.child{
width: 100px;
height: 100px;
background-color: bisque;
color: #fff;
float: left;
margin: 10px 0 0 10px;
}
body{
height: 400px;
}
</style>
<body>
<!-- 放置元素：parent 放置事件:dragenter dragover drop-->
<!-- 拖动元素：child 拖动事件:dragstart drag dragend -->
<div class="parent"></div>
<!-- 设置当前元素可拖拽 draggable设置当前元素是否可拖拽 默认为false -->
<div class="child" draggable="true" id="one">one</div>
<div class="child" draggable="true" id="two">two</div>
<div class="child" draggable="true" id="three">three</div>
<div class="child" draggable="true" id="four">four</div>
</body>
事件执行代码：
需要拖拽的元素：
//获取parent和child
var parent = document.querySelector('.parent')
var childs=document.querySelectorAll('.child')
//将孩子节点转化为数组
childs=Array.from(childs)
// 给每个孩子绑定事件
childs.forEach(function (item) {
//拖动事件
//开始拖动
item.ondragstart = function (event) {
console.log('ondragstart开始拖动了');
console.log(event, '事件对象');
//给目标元素传输id
console.log(item.id);
event.dataTransfer.setData('id', item.id)
}
//正在拖动
item.ondrag = function () {
console.log('正在拖动');
}
//拖动结束
item.ondragend = function () {
console.log('ondragend拖动结束');
}
})
目标元素：
//进入放置元素 parent
parent.ondragenter = function () {
console.log('ondragenter进入到放置元素');
}
//在放置元素内移动
parent.ondragover = function () {
console.log('ondragover正在放置元素内移动');
//阻止放置元素的默认事件（默认不可放置，所以要阻止）
event.preventDefault()
}
//把拖动元素放置到放置元素
parent.ondrop = function () {
console.log('ondrop放置');
//获取拖动元素传输得数据getData(key)
console.log(event, event.dataTransfer.getData('id'), '事件对象');
var id = event.dataTransfer.getData('id')
this.appendChild(document.querySelector('#' + id))
// 阻止事件冒泡
event.stopPropagation()
}
将拖拽元素重新放回body中：
//把拖动元素放置到body
document.body.ondragover = function () {
console.log('ondragover正在放置元素内移动');
//阻止放置元素的默认事件（默认不可放置，所以要阻止）
event.preventDefault()
}
//把拖动元素放置到放置元素
document.body.ondrop = function () {
console.log('ondrop放置');
//获取拖动元素传输得数据getData(key)
console.log(event, event.dataTransfer.getData('id'), '事件对象');
var id = event.dataTransfer.getData('id')
this.appendChild(document.querySelector('#' + id))
// 阻止事件冒泡
event.stopPropagation()
}
案例完整代码：
<!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: 2px solid cyan;
}
.child {
width: 100px;
height: 100px;
background-color: bisque;
color: #fff;
float: left;
margin: 10px 0 0 10px;
}
body {
height: 400px;
}
</style>
<script>
window.onload = function () {
//获取parent和child
var parent = document.querySelector('.parent')
var childs = document.querySelectorAll('.child')
// console.log(parent,childs);
childs = Array.from(childs)
// 给每个孩子绑定事件
childs.forEach(function (item) {
//拖动事件
//开始拖动
item.ondragstart = function (event) {
console.log('ondragstart开始拖动了');
console.log(event, '事件对象');
console.log(item.id);
event.dataTransfer.setData('id', item.id)
}
//正在拖动
item.ondrag = function () {
console.log('正在拖动');
}
//拖动结束
item.ondragend = function () {
console.log('ondragend拖动结束');
}
})
//进入放置元素 parent
parent.ondragenter = function () {
console.log('ondragenter进入到放置元素');
}
//在放置元素内移动
parent.ondragover = function () {
console.log('ondragover正在放置元素内移动');
//阻止放置元素的默认事件（默认不可放置，所以要阻止）
event.preventDefault()
}
//把拖动元素放置到放置元素
parent.ondrop = function () {
console.log('ondrop放置');
//获取拖动元素传输得数据getData(key)
console.log(event, event.dataTransfer.getData('id'), '事件对象');
var id = event.dataTransfer.getData('id')
this.appendChild(document.querySelector('#' + id))
// 阻止事件冒泡
event.stopPropagation()
}
//把拖动元素放置到body
document.body.ondragover = function () {
console.log('ondragover正在放置元素内移动');
//阻止放置元素的默认事件（默认不可放置，所以要阻止）
event.preventDefault()
}
//把拖动元素放置到放置元素
document.body.ondrop = function () {
console.log('ondrop放置');
//获取拖动元素传输得数据getData(key)
console.log(event, event.dataTransfer.getData('id'), '事件对象');
var id = event.dataTransfer.getData('id')
this.appendChild(document.querySelector('#' + id))
// 阻止事件冒泡
event.stopPropagation()
}
}
</script>
</head>
<body>
<!-- 放置元素：parent 放置事件:dragenter dragover drop-->
<!-- 拖动元素：child 拖动事件:dragstart drag dragend -->
<div class="parent"></div>
<!-- 设置当前元素可拖拽 draggable设置当前元素是否可拖拽 -->
<div class="child" draggable="true" id="one">one</div>
<div class="child" draggable="true" id="two">two</div>
<div class="child" draggable="true" id="three">three</div>
<div class="child" draggable="true" id="four">four</div>
</body>
</html>