HTML5教學-拖放
嗨，前端開發的程式設計師們，你們好！很高興能跟大家講解一些關於HTML5教學的一系列知識，本文給大家主要介紹HTML5拖放事件，拖放是HTML5的常見功能。
拖放（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 屬性設為可拖曳
首先，為了使元素可拖曳，把draggable 屬性設為可拖曳
<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″)。
把被拖元素追加到放置元素（目標元素）中。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
