拖放的事件：dragstart、drag、dragend、dragenter、dragover、dragleave、drop 拖放操作初始化的對象DataTransfer ...
前言
拖放（drap && drop）在我們平時的工作中，經常遇到。它表示：抓取對象以後拖放到另一個位置。目前，它是HTML5標準的一部分。我從幾個方面學習並實踐這個功能。
拖放的流程對應的事件
我們先看下拖放的流程：
選中 ---> 拖動 ---> 釋放
然後，我們一步步看下這個過程中，會發生的事情。
選中
在HTML5標準中，為了使元素可拖動，把draggable屬性設置為true。
文本、圖片和鏈接是預設可以拖放的，它們的draggable屬性自動被設置成了true。
圖片和鏈接按住滑鼠左鍵選中，就可以拖放。
文本只有在被選中的情況下才能拖放。如果顯示設置文本的draggable屬性為true，按住滑鼠左鍵也可以直接拖放。
draggable屬性：設置元素是否可拖動。
語法：<element draggable="true | false | auto" >
- true: 可以拖動
- false: 禁止拖動
- auto: 跟隨瀏覽器定義是否可以拖動
拖動
每一個可拖動的元素，在拖動過程中，都會經歷三個過程，拖動開始-->拖動過程中--> 拖動結束。
| 針對對象 | 事件名稱 | 說明 |
|---|---|---|
| 被拖動的元素 | dragstart | 在元素開始被拖動時候觸發 |
| drag | 在元素被拖動時反覆觸發 | |
| dragend | 在拖動操作完成時觸發 | |
| 目的地對象 | dragenter | 當被拖動元素進入目的地元素所占據的屏幕空間時觸發 |
| dragover | 當被拖動元素在目的地元素內時觸發 | |
| dragleave | 當被拖動元素沒有放下就離開目的地元素時觸發 |
dragenter和dragover事件的預設行為是拒絕接受任何被拖放的元素。因此，我們必須阻止瀏覽器這種預設行為。e.preventDefault();
釋放
到達目的地之後，釋放元素事件
| 針對對象 | 事件名稱 | 說明 |
|---|---|---|
| 目的地對象 | drop | 當被拖動元素在目的地元素里放下時觸發，一般需要取消瀏覽器的預設行為。 |
選中拖動釋放例子
<!DOCTYPE HTML>
<html>
<head>
<title>拖放示例-文本</title>
</head>
<style>
.src {
display: flex;
}
.dropabled {
flex: 1;
}
.txt {
color: green;
}
.img {
width: 100px;
height: 100px;
border: 1px solid gray;
}
.target {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid gray;
color: red;
}
</style>
<body>
<div class="src">
<div class="dragabled">
<div class="txt" id="txt">
所有的文字都可拖拽。
<p draggable="true">此段文字設置了屬性draggable="true"</p>
</div>
<div class="url" id="url">
<a href="http://weiqinl.com" target="_blank">我是url:http://weiqinl.com</a>
</div>
<img class="img" id="tupian1" src="img1.png" alt="圖片1" />
<img class="img" id="tupian2" src="img2.png" alt="圖片2" />
</div>
<div id='target' class="dropabled target">Drop Here</div>
</div>
<script>
var dragSrc = document.getElementById('txt')
var target = document.getElementById('target')
dragSrc.ondragstart = handle_start
dragSrc.ondrag = handle_drag
dragSrc.ondragend = handle_end
function handle_start(e) {
console.log('dragstart-在元素開始被拖動時候觸發')
}
function handle_drag() {
console.log('drag-在元素被拖動時候反覆觸發')
}
function handle_end() {
console.log('dragend-在拖動操作完成時觸發')
}
target.ondragenter = handle_enter
target.ondragover = handle_over
target.ondragleave = handle_leave
target.ondrop = handle_drop
function handle_enter(e) {
console.log('handle_enter-當元素進入目的地時觸發')
// 阻止瀏覽器預設行為
e.preventDefault()
}
function handle_over(e) {
console.log('handle_over-當元素在目的地時觸發')
// 阻止瀏覽器預設行為
e.preventDefault()
}
function handle_leave(e) {
console.log('handle_leave-當元素離開目的地時觸發')
// 阻止瀏覽器預設行為
// e.preventDefault()
}
function handle_drop(e) {
console.log('handle_drop-當元素在目的地放下時觸發')
var t = Date.now()
target.innerHTML = ''
target.append(t + '-拖放觸發的事件。')
e.preventDefault()
}
</script>
</body>
</html>在整個拖放過程中，我們以上說的是錶面現象，事件過程內部還會發生什麼事情呢？請看下麵
