HTML5拖放-7.2HTMLAPI

請(qǐng)把 W3School 圖片拖到矩形中。

成都創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開發(fā)，軟件開發(fā)，微信小程序，10余年建站對(duì)成都混凝土攪拌機(jī)等多個(gè)行業(yè)，擁有多年建站經(jīng)驗(yàn)。

拖放

拖放（Drag 和 Drop）是很常見的特性。它指的是您抓取某物并拖入不同的位置。

拖放是 HTML5 標(biāo)準(zhǔn)的組成部分：任何元素都是可拖放的。

瀏覽器支持

表格中的數(shù)字指示了完全支持拖放的首個(gè)瀏覽器版本。

API           拖放 4.0 9.0 3.5 6.0 12.0
HTML 拖放實(shí)例

下列是關(guān)于拖放的簡(jiǎn)單例子：

實(shí)例 <!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>

它也許看上去有點(diǎn)復(fù)雜，不過讓我們研究一下拖放事件的所有不同部分。

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

首先：為了把一個(gè)元素設(shè)置為可拖放，請(qǐng)把 draggable 屬性設(shè)置為 true：

<img draggable="true">
拖放的內(nèi)容 - ondragstart 和 setData()

然后，規(guī)定當(dāng)元素被拖動(dòng)時(shí)發(fā)生的事情。

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

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

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

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

拖到何處 - ondragover

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

默認(rèn)地，數(shù)據(jù)/元素?zé)o法被放置到其他元素中。為了實(shí)現(xiàn)拖放，我們必須阻止元素的這種默認(rèn)的處理方式。

這個(gè)任務(wù)由 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() 來阻止數(shù)據(jù)的瀏覽器默認(rèn)處理方式（drop 事件的默認(rèn)行為是以鏈接形式打開）通過 dataTransfer.getData() 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)被拖數(shù)據(jù)是被拖元素的 id ("drag1")把被拖元素追加到放置元素中
更多實(shí)例 來回拖放圖片

如何在兩個(gè) <div> 元素之間來回拖放圖像：

 

請(qǐng)把 W3School 圖片拖到矩形中。

本文題目：HTML5拖放-7.2HTMLAPI
文章網(wǎng)址：http://www.bm7419.com/article42/dghhohc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、自適應(yīng)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、App設(shè)計(jì)、網(wǎng)站維護(hù)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)