HTML5实现拖放
一、HTML5 拖放（Drag 和 Drop）
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
二、实现过程
1、设置元素为可拖放：为了使元素可拖动，把 draggable 属性设置为 true ，例如：
![]()
2、拖动什么 - ondragstart 和 setData()：规定当元素被拖动时，会发生什么。
ondragstart事件调用了一个函数，它规定了被拖动的数据
document.ondragstart = function(e){
e.dataTransfer.setData('text',e.target.id) //存储数据
e.target.style.opacity = 0.5
console.log(e.target.id)
}dataTransfer：实现数据的存储和获取 setData(format,data) 存储数据
format参数：数据类型(text/html、text/url-list)
data参数：数据。一般是字符串
3、放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法（即：浏览器会默认阻止ondrop事件，所以必须在ondragover事件中阻止默认行为）
document.ondragover = function(e){
e.preventDefault()
}4、进行放置 - ondrop：当放置被拖数据时，会触发 drop 事件。
-
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
-
被拖数据是被拖元素的 id ("drag1")
-
把被拖元素追加到放置元素（目标元素）中
document.ondrop = function(e){
console.log(e)
//通过e.dataTransfer.setData存储的数据只能在ondrop事件中获取
var data = e.dataTransfer.getData('text')
e.target.appendChild(document.getElementById(data))
}三、拖拽元素支持的事件
1、ondrag：应用于拖拽元素，在整个拖拽过程中都会调用
2、ondragstart：应用于拖拽元素，当拖拽开始时调用
3、ondragleave：应用于拖拽元素，当鼠标离开拖拽元素时调用
4、ondragend：应用于拖拽元素，当拖拽结束时调用
四、目标元素支持的事件
1、ondragenter：应用于目标元素，当拖拽元素进入时调用
2、ondragover：应用于目标元素，当停留在目标元素上方时调用
3、ondrop：应用于目标元素，当在目标元素上方松开鼠标时调用
4、ondragleave：应用于目标元素，当鼠标离开目标元素时调用
五、示例
1、html页面
2、CSS代码
*{
padding: 0;
margin: 0;
}
.div1,.div2,.div3{
margin: 0 20px;
float: left;
width: 200px;
height: 220px;
border: 1px solid #ccc;
}
div{
display: flex;
flex-direction: column;
align-items: center;
}
p{
display: flex;
flex-direction: column;
align-items: center;
}
.p1{
width: 50px;
background-color: pink;
margin: 5px 0;
}
.p2{
width: 80px;
background-color: burlywood;
margin: 5px 0;
}
.p3{
width: 110px;
background-color: rgb(133, 88, 29);
margin: 5px 0;
}
.p4{
width: 140px;
background-color: rgb(172, 39, 48);
margin: 5px 0;
}
.p5{
width: 170px;
background-color: rgb(17, 182, 31);
margin: 5px 0;
}
.p6{
width: 200px;
background-color: rgb(90, 33, 155);
margin: 5px 0;
}3、javascript代码
document.ondragstart = function(e){
/*
dataTransfer：实现数据的存储和获取
setData(format,data) 存储数据
format参数：数据类型(text/html、text/url-list)
data参数：数据。一般是字符串
*/
e.dataTransfer.setData('text',e.target.id) //存储数据
e.target.style.opacity = 0.5
console.log(e.target.id)
}
document.ondragend = function(e){
e.target.style.opacity = 1
}
/*
浏览器会默认阻止ondrop事件，所以必须在ondragover事件中阻止默认行为
*/
document.ondragover = function(e){
e.preventDefault()
}
document.ondrop = function(e){
console.log(e)
//通过e.dataTransfer.setData存储的数据只能在ondrop事件中获取
var data = e.dataTransfer.getData('text')
e.target.appendChild(document.getElementById(data))
}