要為大家詳細(xì)介紹了HTML5拖放效果的實(shí)現(xiàn)代碼，拖放即抓取對(duì)象以后拖到另一個(gè)位置。感興趣的小伙伴們可以參考一下:

在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動(dòng)。但 Safari 5.1.2不支持拖動(dòng)。

下面看看實(shí)現(xiàn)效果：

拖拽前

拖拽后

代碼實(shí)現(xiàn)：

把draggable屬性設(shè)置為true ，才能使元素可拖動(dòng)。

然后，規(guī)定當(dāng)元素被拖動(dòng)時(shí)，會(huì)發(fā)生什么。

在上面的例子中，ondragstart 屬性調(diào)用了一個(gè)函數(shù)，drag(event)，它規(guī)定了被拖動(dòng)的數(shù)據(jù)。

dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：

在這個(gè)例子中，數(shù)據(jù)類型是 "Text"，值是可拖動(dòng)元素的 id ("drag1")。

ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。

默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。

這要通過調(diào)用 ondragover 事件的 event.preventDefault() 方法：event.preventDefault()

當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件。

在上面的例子中，ondrop 屬性調(diào)用了一個(gè)函數(shù)，drop(event)：

調(diào)用 preventDefault() 來避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開）

通過 dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。

被拖數(shù)據(jù)是被拖元素的 id ("drag1")

把被拖元素追加到放置元素（目標(biāo)元素）中

若要實(shí)現(xiàn)來回拖動(dòng)：

若要在兩個(gè)地方來回拖動(dòng)，只需將上面代碼稍作修改就行了.將body中的代碼改成:

然后在style樣式中加上#div2就可以了：

我們學(xué)習(xí)了 HTML 提供的原生拖放(drag & drop)后,是時(shí)候想一想這個(gè)東西可以用來作什么，可以在什么時(shí)候使用，使用的場(chǎng)景等等

場(chǎng)景分析

當(dāng)我們?cè)谧?cè)成功一個(gè)賬戶時(shí)，一般網(wǎng)站會(huì)讓我們上傳我們的用戶頭像，或者在實(shí)名認(rèn)證的時(shí)候會(huì)涉及到身份證圖片上傳到等，這時(shí)候我們可以使用input提供的file屬性進(jìn)行選擇本地文件進(jìn)行上傳。

我們?cè)傧胍幌拢?dāng)在電腦端的情況下，當(dāng)用戶打開文件選擇框時(shí)再尋找圖片對(duì)應(yīng)的文件夾，再進(jìn)行選取文件的時(shí)候是不是會(huì)有點(diǎn)麻煩呢？我們可不可以讓用戶找到圖片文件，直接引入實(shí)現(xiàn)上傳呢？答案是可以的。

怎么做

經(jīng)過這些分析后，我們可以嘗試使用 HTML5 提供的拖拽，使得目標(biāo)元素增加讀取文件功能，然后使用 ajax 實(shí)現(xiàn)圖片上傳。

談一談我們需要使用到的技術(shù):

• Drag & Drop: HTML5 基于拖拽的事件機(jī)制
• File API: 可以很方便的讓 Web 應(yīng)用訪問文件對(duì)象，F(xiàn)ile API 包括 FileList、Blob、File、FileReader、URI scheme，本文主要講解拖拽上傳中用到的 FileList 和 FileReader 接口。
• FormData: FormData 是基于 XMLHttpRequest Level 2 的新接口，可以方便 web 應(yīng)用模擬 Form 表單數(shù)據(jù)，最重要的是它支持文件的二進(jìn)制流數(shù)據(jù)，這樣我們就能夠通過它來實(shí)現(xiàn) AJAX 向后端發(fā)送文件數(shù)據(jù)了。

HTML5 拖拽事件

關(guān)于 Drag & Drop 拖拽事件，之前我寫過一篇專門介紹的文章，HTML5-拖拽,大家有興趣的話可以點(diǎn)擊鏈接查看，我在這里就不在多啰嗦了~下面直接出拖拽上傳的簡(jiǎn)要代碼示例

var oDragWrap = document.body;
//拖進(jìn)
oDragWrap.addEventListener(
 "dragenter",
 function(e) {
 e.preventDefault();
 },
 false
);
//拖離
oDragWrap.addEventListener(
 "dragleave",
 function(e) {
 dragleaveHandler(e);
 },
 false
);
//拖來拖去 , 一定要注意dragover事件一定要清除默認(rèn)事件
//不然會(huì)無法觸發(fā)后面的drop事件
oDragWrap.addEventListener(
 "dragover",
 function(e) {
 e.preventDefault();
 },
 false
);
//扔
oDragWrap.addEventListener(
 "drop",
 function(e) {
 dropHandler(e);
 },
 false
);
var dropHandler = function(e) {
 //將本地圖片拖拽到頁面中后要進(jìn)行的處理都在這
};

獲取文件數(shù)據(jù) HTML5 File API

File API 中的 FileReader 接口，作為 File API 的一部分，F(xiàn)ileReader 專門用來讀取文件。我們?cè)谶@里主要介紹一些 File API 中的 FileList 接口，它主要通過兩個(gè)途徑獲取本地文件列表，一是<input type="file"/>的表單形式，另一種則是e.dataTransfer.files拖拽事件傳遞的文件信息。

var fileList = e.dataTransfer.files;

使用 files 方法將會(huì)獲取到拖拽文件的數(shù)組形式的數(shù)據(jù)，每個(gè)文件占用一個(gè)數(shù)組的索引，如果索引不存在文件數(shù)據(jù)，將返回 Null。可以通過length屬性獲取文件的數(shù)量。

var fileNum = fileList.length;

拖拽上傳需要注意的是需要判斷兩個(gè)條件

1. 拖拽的是文件而不是頁面的元素
2. 拖拽的是圖片而不是其他類型的文件，可以通過 file.type 屬性獲取文件的類型

// 檢測(cè)是否是拖拽文件到頁面的操作
if (fileList.length === 0) {
 return;
}
// 檢測(cè)文件是不是圖片
if (fileList[0].type.indexOf("image") === -1) {
 return;
}

下面我們看看結(jié)合之前的拖拽事件，來實(shí)現(xiàn)拖拽圖片并在頁面中預(yù)覽

var dropHandler = function(e) {
 e.preventDefault(); //獲取文件列表
 var fileList = e.dataTransfer.files;
 //檢測(cè)是否是拖拽文件到頁面的操作
 if (fileList.length == 0) {
 return;
 }
 //檢測(cè)文件是不是圖片
 if (fileList[0].type.indexOf("image") === -1) {
 return;
 }
 //實(shí)例化file reader對(duì)象
 var reader = new FileReader();
 var img = document.createElement("img");
 reader.onload = function(e) {
 img.src = this.result;
 oDragWrap.appendChild(img);
 };
 reader.readAsDataURL(fileList[0]);
};

當(dāng)完成以上操作后，相信你可以成功的完成了拖拽圖片預(yù)覽的操作。當(dāng)你查看 img 標(biāo)簽時(shí)會(huì)發(fā)現(xiàn)，img的src屬性是一個(gè)超長(zhǎng)的文件二進(jìn)制數(shù)據(jù)，當(dāng)你需要很多這種的img元素時(shí)，建議將展示區(qū)域脫離文檔流，讓其絕對(duì)定位減少頁面的 reflow

AJAX 上傳圖片

既然已經(jīng)獲取到拖拽到web頁面中的圖片數(shù)據(jù)了，下一步就是將其發(fā)送到服務(wù)器端。

總結(jié)

1. 監(jiān)聽拖拽: 監(jiān)聽頁面元素的拖拽事件，包括: dragenter、dragover、dragleave 和drop,一定要將dragover的默認(rèn)事件取消掉，不然無法觸發(fā)drop事件。如需拖拽頁面里面的元素，需要給其添加屬性draggable="true"
2. 獲取拖拽文件: 在 drop 事件觸發(fā)后通過e.dataTransfer.files獲取拖拽文件列表，一定要將drop的默認(rèn)事件取消掉，否則會(huì)默認(rèn)打開文件length屬性獲取文件數(shù)量，type屬性獲取文件類型
3. 讀取圖片數(shù)據(jù)并添加預(yù)覽圖: 實(shí)例化FileReader對(duì)象，通過其readAsDataURL(file)方法獲取文件二進(jìn)制流，并監(jiān)聽其onload事件，將e.result賦值給img的src屬性，最后將圖片添加到DOM中
4. 發(fā)送圖片數(shù)據(jù)

lt;!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>H5混合開發(fā)(runoob.com)</title>

<style type="text/css">

#div1{width:350px;height:70px;padding:10px;border:1pxsolid#aaaaaa;}

</style>

<script>

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<p>拖動(dòng) RUNOOB.COM 圖片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br>

<img id="drag1" src="img/logo.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>

</html>

它看上去也許有些復(fù)雜，不過我們可以分別研究拖放事件的不同部分。

設(shè)置元素為可拖放

首先，為了使元素可拖動(dòng)，把 draggable 屬性設(shè)置為 true ：

<img draggable="true">

拖動(dòng)什么 - ondragstart 和 setData()

然后，規(guī)定當(dāng)元素被拖動(dòng)時(shí)，會(huì)發(fā)生什么。

在上面的例子中，ondragstart 屬性調(diào)用了一個(gè)函數(shù)，drag(event)，它規(guī)定了被拖動(dòng)的數(shù)據(jù)。

dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

在這個(gè)例子中，數(shù)據(jù)類型是 "Text"，值是可拖動(dòng)元素的 id ("drag1")。

放到何處 - ondragover

ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。

默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。

這要通過調(diào)用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

進(jìn)行放置 - ondrop

當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件。

在上面的例子中，ondrop 屬性調(diào)用了一個(gè)函數(shù)，drop(event)：

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

代碼解釋：

• 調(diào)用 preventDefault() 來避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開）

• 通過 dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。

• 被拖數(shù)據(jù)是被拖元素的 id ("drag1")

• 把被拖元素追加到放置元素（目標(biāo)元素）中