HTML5拖放-7.2HTMLAPI

請把 W3School 圖片拖到矩形中。

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

拖放

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

拖放是 HTML5 標準的組成部分：任何元素都是可拖放的。

瀏覽器支持

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

API 拖放 4.0 9.0 3.5 6.0 12.0

HTML 拖放實例

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

實例 <!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>

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

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

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

拖放的內(nèi)容 - ondragstart 和 setData()

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

在上面的例子中，ondragstart 屬性調(diào)用了一個 drag(event) 函數(shù)，規(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")。

拖到何處 - ondragover

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

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

這個任務(wù)由 ondragover 事件的 event.preventDefault() 方法完成：

event.preventDefault()

進行放置 - 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() 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)被拖數(shù)據(jù)是被拖元素的 id ("drag1")把被拖元素追加到放置元素中

更多實例來回拖放圖片

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

請把 W3School 圖片拖到矩形中。

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

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

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

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML5拖放-7.2HTMLAPI