拖放是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
1.drggable屬性
如果網(wǎng)頁元素的draggable元素為true，這個元素就是可以拖動的。
<div draggable="true">Draggable Div</div>
注意：在大多數(shù)瀏覽器中，a元素和img元素默認就是可以拖放的，但是為了保險起見，最好還是加上draggable屬性。
2.事件
dragstart:網(wǎng)頁元素開始拖動時觸發(fā)。
drag:被拖動的元素在拖動過程中持續(xù)觸發(fā)。
dragenter:被拖動的元素進入目標元素時觸發(fā)，應在目標元素監(jiān)聽該事件。
dragleave:被拖動的元素離開目標元素時觸發(fā)，應在目標元素監(jiān)聽該事件。
dragover:被拖動元素停留在目標元素之中時持續(xù)觸發(fā)，應在目標元素監(jiān)聽該事件。
drap:被拖動元素或從文件系統(tǒng)選中的文件，拖放落下時觸發(fā)。
dragend:網(wǎng)頁元素拖動結(jié)束時觸發(fā)。
注意：以上這些事件都可以指定回調(diào)函數(shù)。
3.dataTransfer對象
拖動過程中，回調(diào)函數(shù)接受的事件參數(shù)，有一個dataTransfer屬性。它指向一個對象，包含了與拖動相關(guān)的各種信息。
draggableElement.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Hello World!');
});
上面代碼在拖動開始時，在dataTransfer對象上儲存一條文本信息，內(nèi)容為“Hello World”。當拖放結(jié)束時，可以用getData方法取出這條信息。
dataTransfer對象的屬性：
**dropEffect:**拖放的操作類型，決定了瀏覽器如何顯示鼠標形狀，可能的值為copy、move、link和none。
effectAllowed:指定所允許的操作，可能的值為copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默認值，等同于all，即允許一切操作）。
files:包含一個FileList對象，表示拖放所涉及的文件，主要用于處理從文件系統(tǒng)拖入瀏覽器的文件。
types:儲存在DataTransfer對象的數(shù)據(jù)的類型。
dataTransfer對象的方法：
**setData(format, data):**在dataTransfer對象上儲存數(shù)據(jù)。第一個參數(shù)format用來指定儲存的數(shù)據(jù)類型，比如text、url、text/html等。
**getData(format):**從dataTransfer對象取出數(shù)據(jù)。
**clearData(format):**清除dataTransfer對象所儲存的數(shù)據(jù)。如果指定了format參數(shù)，則只清除該格式的數(shù)據(jù)，否則清除所有數(shù)據(jù)。
**setDragImage(imgElement, x, y):**指定拖動過程中顯示的圖像。默認情況下，許多瀏覽器顯示一個被拖動元素的半透明版本。參數(shù)imgElement必須是一個圖像元素，而不是指向圖像的路徑，參數(shù)x和y表示圖像相對于鼠標的位置。
dataTransfer對象允許在其上存儲數(shù)據(jù)，這使得在被拖動元素與目標元素之間傳送信息成為可能。
4.實例講解
1.網(wǎng)頁元素拖放
<!DOCTYPE html>
<html>
<head>
<title>Video step2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<style>
ul{
min-height:100px;
background-color:#EEE;
margin:20px;
}
ul li{
background-color:#CCC;
padding:10px;
margin-bottom:10px;
}
</style>
<body>
<ul id="drag-elements">
<li draggable="true">A</li>
<li draggable="true">B</li>
<li draggable="true">C</li>
</ul>
<ul id="drop-target"></ul>
<script>
//獲取目標元素
var target = document.querySelector('#drop-target');
//獲取需要拖放的元素
var dragElements = document.querySelectorAll('#drag-elements li');
//臨時記錄被拖放的元素
var elementDragged = null;
//循環(huán)監(jiān)聽被拖放元素的開始拖放和結(jié)束拖放事件
for (var i = 0; i < dragElements.length; i++) {
//開始拖放事件監(jiān)聽
dragElements[i].addEventListener('dragstart', function(e) {
//設置當前拖放元素的數(shù)據(jù)參數(shù)
e.dataTransfer.setData('text', this.innerHTML);
//保存當前拖放對象
elementDragged = this;
});
//結(jié)束拖放事件監(jiān)聽
dragElements[i].addEventListener('dragend', function(e) {
//注銷當前拖放對象
elementDragged = null;
});
}
//目標元素監(jiān)聽被拖放元素進入事件
target.addEventListener('dragover', function(e) {
//阻止瀏覽器默認行為
e.preventDefault();
//設置鼠標樣式
e.dataTransfer.dropEffect = 'move';
return false;
});
//目標元素監(jiān)聽當被拖放元素落下時刻事件
target.addEventListener('drop', function(e) {
//阻止默認行為
e.preventDefault();
//阻止默認行為
e.stopPropagation();
//獲取當前被拖放元素的存放數(shù)據(jù)參數(shù)
this.innerHTML = 'Dropped ' + e.dataTransfer.getData('text');
//刪除被拖放元素
document.querySelector('#dragelements').
removeChild(elementDragged);
return false;
});
</script>
</body>
</html>
2.拖動本地文件
假定我們要從文件系統(tǒng)拖動一個txt文本，在瀏覽器中展示內(nèi)容。
首先，獲取拖動的目標元素和內(nèi)容展示區(qū)域。
var target = document.querySelector('#target');var contentDiv = document.querySelector('#content');
然后，定義目標元素的dragover事件，主要是為了當文件進入目標元素后，改變鼠標形狀。
target.addEventListener('dragover', function(e) { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'copy';});
接著，定義目標元素的drop事件，展示文件內(nèi)容。
target.addEventListener('drop', function(e) {
e.preventDefault();
e.stopPropagation(); v
var fileList = e.dataTransfer.files;
if (fileList.length > 0) {
var file = fileList[0];
var reader = new FileReader();
reader.onloadend =function(e) {
if (e.target.readyState == FileReader.DONE) {
var content = reader.result; contentDiv.innerHTML = "File: " + file.name + "\n\n" + content; } }
reader.readAsBinaryString(file);
}
});
具體代碼：
<!DOCTYPE html>
<html>
<head>
<title>Video step2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<style>
#target{
margin:10px;
min-height:100px;
max-height:600px;
background-color:#EEE;
border-radius:5px;
overflow:auto;
}
#content{
padding:10px;
font-size:18px;
line-height:25px;
}
</style>
<body>
<div id="target" title="拖動文件到這里">
<div id="content"></div>
</div>
<script>
//目標元素監(jiān)聽被拖放文件進入元素區(qū)域事件
target.addEventListener('dragover', function(e) {
//阻止默認行為
e.preventDefault();
//阻止默認行為
e.stopPropagation();
//改變鼠標樣式
e.dataTransfer.dropEffect = 'copy';
return false;
});
//目標元素監(jiān)聽被拖放文件落下一刻的事件
target.addEventListener('drop', function(e) {
//阻止默認行為
e.preventDefault();
e.stopPropagation();
//獲取所拖放的文件
var fileList = e.dataTransfer.files;
if (fileList.length) {
//獲取第一個文件
var file = fileList[0];
//創(chuàng)建文件輸入流
var reader = new FileReader();
//文件讀取回調(diào)函數(shù)
reader.onloadend = function(e) {
if (e.target.readyState == FileReader.DONE) {
var content = reader.result;
contentDiv.innerHTML = 'File: ' + file.name + '\n\n' + content;
}
}
//讀取文件
reader.readAsBinaryString(file);
}
});
</script>
</body>
</html>
謝謝觀看，如有任何疑問，歡迎評論交流！
