HTML5中拖放是什么意思？

拖放是一種常見的特性，即抓取對象以后拖到另一個位置。，拖放的目的是可以讓你將某個對象放置到你想要放置的位置。 在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。

Drag和Drop分別指什么？

darg：事件主體是被拖放元素，在正在拖放被拖放元素時觸發(fā)。

drop：事件主體是目標元素，在目標元素完全接受被拖放元素時觸發(fā)。

瀏覽器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動。

注意:Safari 5.1.2不支持拖動.

HTML5 拖放使用實例

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

這有實例：

 !DOCTYPE HTML  html  head  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  div id= div1 ondrop= drop(event) ondragover= allowDrop(event) /div  img id= drag1 src= img_logo.gif draggable= true ondragstart= drag(event) width= 336 height= 69  /body  /html 

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

拖放事件執(zhí)行詳細步驟：

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

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

 img draggable= true 

拖動什么 - ondragstart 和 setData()

然后，規(guī)定當元素被拖動時，會發(fā)生什么。

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

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

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

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

提示：你可以在本站的“ondragstart 事件”部分了解到更多的有用信息！

2. 放到何處 - ondragover

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

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

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

event.preventDefault()

3. 進行放置 - ondrop

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

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

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

代碼解釋：

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

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

被拖數(shù)據(jù)是被拖元素的 id ( drag1 )，把被拖元素追加到放置元素（目標元素）中。

【相關(guān)推薦】

html的基礎(chǔ)元素，讓你零基礎(chǔ)學習HTML

HTML和HTML5的發(fā)展歷史

以上就是HTML5拖放：Drag和Drop分別指什么？怎么使用的？的詳細內(nèi)容，其它編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。