HTML5文件拖放的方法

這篇文章主要介紹“HTML5文件拖放的方法”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“HTML5文件拖放的方法”文章能幫助大家解決問題。

公司主營業(yè)務：成都網站建設、網站設計、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出石峰免費做網站回饋大家。

拖放（Drag 和 drop）是 HTML5 標準的組成部分。

拖放

拖放是一種常見的特性，即抓取對象以后拖到另一個位置。

在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。

瀏覽器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

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

HTML5 拖放實例

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

實例

<!DOCTYPE HTML>

<html>

<head>

<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="img_logo.gif" draggable="true"

ondragstart="drag(event)" width="336" height="69" />

</body>

</html>

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

設置元素為可拖放

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

<img draggable="true" />

拖動什么 - ondragstart 和 setData()

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

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

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

function drag(ev)

{

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

}

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

放到何處 - ondragover

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

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

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

event.preventDefault()

進行放置 - ondrop

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

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

function drop(ev)

{

ev.preventDefault();

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

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

}

代碼解釋：

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

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

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

把被拖元素追加到放置元素（目標元素）中

關于“HTML5文件拖放的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

分享題目：HTML5文件拖放的方法
分享路徑：http://muchs.cn/article34/jepope.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供響應式網站、靜態(tài)網站、ChatGPT、外貿建站、建站公司、定制網站

廣告

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

成都網站建設