HTML5 拖放（Drag 和 Drop）功能開發——基礎實戰

時間 2019-12-08

標籤 html5 html 拖放 drag drop 功能開發基礎實戰欄目 HTML5 简体版

原文原文鏈接

隨着HTML5的普及度愈來愈高，如今寫代碼也遇到一些了，通過同事的點播開展了一次Dojo活動用以技術交流，我也乘此機會將HTML5的拖放功能整理了一下。javascript

簡介

拖拽(Drag/Drop)是個很是廣泛的功能。在生活中，拖放物品實際上是至關常見的一個動做。標榜「互聯網生活尖鑿獅」的程序猿也在一直試圖用鼠標模擬出「手」的操做，用來給用戶以更好的體驗，你能夠抓住一個對象，而且拖動到你想放置的區域。不少javascript都相似實現了相關的功能，例如，jQueryUI的draganddrop組件，好比《JS實現頁面拖放》。。在HTML5中，拖拽(draganddrop)成爲了標準操做，任何元素都支持。html

定義

拖放是一種常見的特性，即抓取對象之後拖到另外一個位置。html5

在 HTML5 中，拖放是標準的一部分，任何元素都可以拖放。java

瀏覽器支持

雖然是HTML5的東西，可是，根據findmebyip中顯示的瀏覽器支持狀況來看，IE6~IE8都是有drag & drop API的（見下截圖）。web

Internet Explorer 6~九、Firefox、Opera 十二、Chrome 以及 Safari 5 支持拖放。瀏覽器

註釋：在 Safari 5.1.2 中不支持拖放。app

根據本身的簡單的測試，低版本的IE瀏覽器確實支持諸如ondragstart事件，可是會報不認識dataTransfer的錯誤。可見IE在細節的處理上與現代瀏覽器有些不一樣。函數

HTML5 拖放實例

下面的例子是一個簡單的拖放實例：測試

<script type="text/javascript">
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>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="http://www.baidu.com/img/baidu_jgylogo3.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

</body>

它看上去也許有些複雜，不過咱們能夠分別研究拖放事件的不一樣部分。this

設置元素爲可拖放

首先，爲了使元素可拖動，把 draggable 屬性設置爲 true ：

<img draggable="true" />

拖動什麼 - ondragstart 和 setData()

而後，規定當元素被拖動時，會發生什麼。

在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。

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

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。

放到何處 - ondragover

ondragover 事件規定在何處放置被拖動的數據。

默認地，沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。

這要經過調用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

進行放置 - ondrop

當放置被拖數據時，會發生 drop 事件。

在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

代碼解釋：

調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以連接形式打開）
經過 dataTransfer.getData("Text") 方法得到被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據。
被拖數據是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標元素）中

拖放(Drag 和 Drop)各屬性生命週期

剛纔你們已經看到了一些新鮮屬性名詞，如 ondragstart。或許仍是很陌生，不知其因此，下面看一張表格或許能豁然開朗：

拖動生命週期	屬性	值	描述
拖動開始	ondragstart	script	在拖動操做開始時執行腳本（對象是被拖拽元素）
拖動過程當中	ondrag	script	只要腳本在被拖動就容許腳本（對象是被拖拽元素）
拖動過程當中	ondragenter	script	當元素被拖動到一個合法的放置目標時，執行腳本（對象是目標元素）
拖動過程當中	ondragover	script	只要元素正在合法的放置目標上拖動時，就執行腳本（對象是目標元素）
拖動過程當中	ondragleave	script	當元素離開合法的放置目標時（對象是目標元素）
拖動結束	ondrop	script	將被拖拽元素放在目標元素內時運行腳本（對象是目標元素）
拖動結束	ondragend	script	在拖動操做結束時運行腳本（對象是被拖拽元素）

寫在哪呢？

其實參照上表「描述」中括號內的提示便可知道，不過爲了能更直觀的瞭解到，特呈上代碼：

被拖放元素

<span draggable="true" id="Span1" ondragstart="fooDragStart(this, event)" ondrag="fooDrag(this, event)" ondragend="fooDragEnd(this, event)">
<img src="../images/yjj_1.png"></span>

目標元素

<div  id="div1" ondrop="fooDrop(this, event)"
                            ondragenter="fooDragEnter(this, event)" ondragleave="fooDragLeave(this, event)"
                            ondragover="fooDragOver(this,event)">
                        </div>

執行順序

下面，我將展現將一張圖片放入div中的整個script執行過程：

執行元素介紹

執行結果

　　1. 成功將圖片拖入div中

onDragStart，當元素被拖動到一個合法的放置目標時，執行腳本（對象是目標元素）
onDrag，只要腳本在被拖動就容許腳本
onDrag，只要腳本在被拖動就容許腳本
onDragEnter，在拖動操做開始時執行腳本
onDragOver，只要元素正在合法的放置目標上拖動時，就執行腳本（對象是目標元素）
onDrag，只要腳本在被拖動就容許腳本
onDragOver，只要元素正在合法的放置目標上拖動時，就執行腳本（對象是目標元素）
onDrop，在拖動操做結束時運行腳本
onDragEnd，在拖動操做結束時運行腳本

　　2. 已拖放，可最終未放入div中

onDragStart，當元素被拖動到一個合法的放置目標時，執行腳本（對象是目標元素）
onDrag，只要腳本在被拖動就容許腳本
onDrag，只要腳本在被拖動就容許腳本
onDragEnter，在拖動操做開始時執行腳本
onDragOver，只要元素正在合法的放置目標上拖動時，就執行腳本（對象是目標元素）
onDrag，只要腳本在被拖動就容許腳本
onDragOver，只要元素正在合法的放置目標上拖動時，就執行腳本（對象是目標元素）
onDrag，只要腳本在被拖動就容許腳本
onDragLeave，當元素離開合法的放置目標時（對象是目標元素）
onDrag，只要腳本在被拖動就容許腳本
onDrag，只要腳本在被拖動就容許腳本
onDragEnd，在拖動操做結束時運行腳本

由上兩個執行順序的Log能看出：