資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML DOM DragEvent
HTML DOM DragEvent 是一種事件型別，每當選擇文字被拖動和放下時就會執行。此事件在 HTML5 中引入。
屬性
以下是 HTML DOM DragEvent 的屬性：
| 屬性 | 描述 |
|---|---|
| dataTransfer | 返回使用者拖動或放下 的資料。 |
語法
以下是 DragEvent 的語法：
Object.DragEventType= function_name;
這裡，function_name 是我們想要在事件執行時執行的函式。
事件
以下是屬於 DragEvent 物件的事件型別：
| 事件 | 描述 |
|---|---|
| ondrag | 當元素正在被拖動時發生。 |
| ondragend | 當用戶完成元素拖動時發生。 |
| ondragenter | 當被拖動的元素進入放置目標時發生。 |
| ondragleave | 當被拖動的元素離開放置目標時發生。 |
| ondragover | 當被拖動的元素在放置目標上方時發生。 |
| ondragstart | 當用戶開始拖動元素時發生。 |
| ondrop | 當被拖動的元素放置到放置目標後發生。 |
示例
<!DOCTYPE html>
<html>
<head>
<style>
.DivDrop {
float: left;
width: 100px;
height: 40px;
margin:10px;
border: 1px solid blue;
background-color:lightgreen;
font-weight:bold;
}
</style>
</head>
<body>
<h2>DragEvent example</h2>
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>
<p id="Sample" style="clear:both"></p>
<script>
document.ondragstart = function(event) {
event.dataTransfer.setData("Text", "spanDrag");
document.getElementById("spanDrag").innerText="drag Text";
document.getElementById("spanDrag").style.backgroundColor="lightgreen";
};
document.ondrag = function(event) {
document.getElementById("Sample").innerHTML = "Span element is being dragged";
};
document.ondragover = function(event) {
event.preventDefault();
};
document.ondrop = function(event) {
event.preventDefault();
if(event.target.className=="DivDrop"){
var txt = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(txt));
document.getElementById(txt).innerText="Dragged Text";
document.getElementById(txt).style.backgroundColor="lightyellow";
document.getElementById("Sample").innerHTML = "The span element is dropped";
}
};
</script>
</body>
</html>輸出
這將產生以下輸出：
拖動“Drag This！”文字時，它將變為“drag Text”。
將“drag Text”放到第二個 div 中：
在上面的例子中：
我們首先建立了兩個具有相同類名“DivDrop”的 div 元素，這將允許我們對兩者使用通用的 css 樣式。第一個 <div> 元素在其內部包含一個 <span> 元素，我們稍後將拖動它：
.DivDrop {
float: left;
width: 100px;
height: 40px;
margin:10px;
border: 1px solid blue;
background-color:lightgreen;
font-weight:bold;
}
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>然後，我們建立了幾個將在事件發生時執行的函式。第一個函式與 ondragstart 事件相關聯。當用戶開始拖動文字時，此事件會觸發。該函式包含 setData() 方法，該方法接受拖動資料型別和資料。這裡的型別是“text”，資料是 <span> 元素的 id。您應該使用 event.target.id 來查詢與 <p> 標記關聯的 id。為了簡便起見，我們在這裡使用了名稱：
document.ondragstart = function(event) {
event.dataTransfer.setData("Text", "spanDrag");
document.getElementById("spanDrag").innerText="drag Text";
document.getElementById("spanDrag").style.backgroundColor="lightgreen";
};與 ondrag 事件關聯的函式透過在其 id 獲取後使用其 innerHTML 屬性將 <p> 元素文字設定為“Span 元素正在被拖動”。當用戶拖動文字時，ondrag 事件會觸發：
Document.ondrag = function(event) {
document.getElementById("Sample").innerHTML = "Span element is being dragged";
};與 ondragover 事件關聯的函式使用 event.preventDefault() 方法來停止在 dragover 上發生的預設操作。當被拖動的元素位於目標上方時，ondragover 事件會定期觸發：
document.ondragover = function(event) {
event.preventDefault();
};與 ondrop 事件關聯的函式阻止預設操作發生。然後，它檢查目標元素是否是第二個 <div> 元素。如果不檢查它是什麼元素，它可以將文字放置在頁面的任何位置，這可能會影響網頁的外觀。
然後，我們使用 getData() 方法獲取型別為“text”的拖動資料。在我們的例子中，該元素將是 <span>，然後我們將 <span> 元素作為第二個 div 的子元素附加，並更改其內部文字和背景顏色以反映更改：
document.ondrop = function(event) {
event.preventDefault();
if(event.target.className=="DivDrop"){
var txt = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(txt));
document.getElementById(txt).innerText="Dragged Text";
document.getElementById(txt).style.backgroundColor="lightyellow";
document.getElementById("Sample").innerHTML = "The span element is dropped";
}
212 次檢視
