H5中， 有個屬性，draggable="true"， 這個屬性呢(默認false)，需要加在標簽上，加上去該標簽就可以拖動了， 看下gif圖吧
默認的標簽，是不能拖動的，但是有兩個標簽是意外，img標簽，和 a標簽，默認就可以拖動。
瀏覽器兼容問題： w3c 是說 都支持， 但是據我實測， firefox 瀏覽器，在我這台機子上面是不支持的。 所以，使用的時候，注意一下，firefox 這個特殊的瀏覽器
好了，接下來，看看他還有些什么東西吧。拖拽div的時候，他身上能監聽到三個事件 ↓
<script>
var div = document.getElementsByTagName('div')[0];
div.ondragstart = function(e){ //開始拖拽事件
console.log('start');
}
div.ondrag = function(e){ //拖拽過程中的事件
console.log('drag');
}
div.ondragend = function(e){ //結束拖拽事件
console.log('end');
}
</script>
如果有仔細看的朋友，就會觀察到， dragstart事件，並不是在點擊的時候觸發的，是點擊之后，開始移動的時候觸發的，還有，drag事件呢， 只要在觸發了 dragstart 事件后，移動了，那么，他就會不停的觸發，即使你已經停止移動了，還是會觸發，直到你放下鼠標按鍵，觸發了 dragend事件后，才停止。
簡單可以理解為，drag 事件呢， 就是在移動的過程中會一直觸發。
那么。做一個簡單的拖拽小demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width: 100px; height: 100px; background-color: red; position: absolute; left: 0px; top: 0px; } </style> </head> <body> <div draggable="true"></div> <script> var div = document.getElementsByTagName('div')[0]; var X = 0, Y = 0; div.ondragstart = function(e){ X = e.clientX; //記錄鼠標點下的位置。(因為div的定位點，是左上角 0，0) Y = e.clientY; } div.ondragend = function(e){ var X1 = e.clientX - X; //結束的位置，減去鼠標點下的位置，那么得到的位置，就是div落下的位置。 var Y1 = e.clientY - Y; div.style.left = div.offsetLeft + X1 + 'px'; //這里還需要加上 div當前的位置， 累加。 div.style.top = div.offsetTop + Y1 + 'px'; } </script> </body> </html>
你以為這樣就結束了嗎？
還有四個事件，分別是 ondragenter, ondragover, ondragleave, ondrop, 這四個事件呢，是綁定到，你要把拖拽的東西，放到那里去。 舉個例子，我要拿一個杯子，那么我要把這個杯子放到哪里去呢？ 是不是得有個東西，給他放？ 那么這四個事件，就是綁定在，給他放的標簽上。 看gif 圖吧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div:nth-of-type(1){ width: 100px; height: 100px; background-color: red; } .box{ position: absolute; left: 200px; top: 200px; width: 200px; height: 200px; border: 1px solid black; } </style> </head> <body> <div draggable="true"></div> <div class="box"></div> <script> var box = document.getElementsByClassName('box')[0]; box.ondragenter = function(){ console.log('enter'); // 跟 dragstart 事件一樣， 只不過，是進入到該標簽內才會觸發(不是東西進入就觸發，還得是鼠標進去)。 } box.ondragover = function(){ // 跟 drag 事件一樣， 只不過，是進入到該標簽內才會觸發。 console.log('over'); } box.ondragleave = function(){ // 是進入到該標簽內,在離開該標簽才會觸發。(鼠標抬起，物體會回到原來的位置上，此時也會觸發leave事件，因為已經離開了) console.log('leave'); } box.ondrop = function(){ console.log('drop'); // 跟 dragend 事件一樣， 只不過，是進入到該標簽內,在該標簽內放置標簽才會觸發。在該標簽外面放置是不會觸發的
} </script> </body> </html>
看完上面gif圖的 有沒有發現， 前三個事件都觸發了， 為啥第四個事件，drop 不會觸發呢？ 為什么在黑框里面放置紅方塊不會觸發，在外面放置也不會觸發？
這是因為，無論你在哪里放置 這個紅方塊。 都是不允許的，在外面放(body)，里面放(box)，需要添加一個阻止默認事件才可以。在ondragover 里面添加即可
box.ondragover = function(e){ e.preventDefault(); }
接下來，做一個小demo， 拖拽，放置到框框里面,上效果圖
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } .box { width: 200px; height: 50px; background-color: #0ff; margin-top: 10px; } .wra { position: absolute; left: 300px; top: 0; width: 200px; height: auto; border: 1px solid black; } .wra:nth-of-type(1){ left: 0; top: 0; } </style> </head> <body> <div class="wra" > <div class="box" draggable="true">1</div> <div class="box" draggable="true">2</div> <div class="box" draggable="true">3</div> </div> <div class="wra"></div> <script> var wra = document.getElementsByClassName('wra')[1]; var box = document.getElementsByClassName('box'); var dom = null; for (var i = 0; i < box.length; i++) { //給每個塊 添加開始拖拽的事件。 box[i].ondragstart = function () { dom = this; //誰觸發了這個事件，就把它添加到 dom變量上。 } } wra.ondragover = function (e) { e.preventDefault(); } wra.ondrop = function () { this.appendChild(dom); // 在觸發放置事件后，把dom變量上面存dom元素，添加到 wra里面去。 } </script> </body> </html>
本章結束，感謝你的閱讀。