drag &drop 拖拽事件

admin發表於2019-10-07
事件

本文將對 HTML5 拖拽操作中涉及的事件進行一下概述。

並不會對每一個事件的用法進行詳細分析，具體參閱本版塊的相關文章。

一.事件所屬元素：

完整的拖動涉及兩個元素或者說兩大類元素。

（1）.源元素，也就是被拖動元素。

（2）.目標元素，源元素將被拖拽到其中。

簡單程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
p{
  width:100px;
  height:50px;
  background-color:red;
}
#box {
  width:300px; 
  height:100px;
  background-color:#ccc;
}
</style>
<script>
window.onload = (ev) => {
  let odiv=document.getElementById("box");
  let op=document.getElementById("p");
 
  op.ondragstart = (ev) => {
    ev.dataTransfer.setData("Text",ev.target.id);
  }
 
  odiv.ondragover = (ev) => {
    ev.preventDefault();
  }
 
  odiv.ondrop = (ev) => {
    ev.preventDefault();
    let data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
  }
}
</script>
</head>
<body>
<p draggable="true" id="p"></p>
<div id="box"></div>
</body>
</html>

上述程式碼可以將紅色矩形拖拽到灰色矩形中。

所以，紅色矩形就是源元素，灰色矩形是目標元素。

當前標準具有總共存在七個事件，所屬元素如下：

1.源元素上觸發的事件：

（1）.dragstart：當源元素開始拖動時觸發。

（2）.drag：源元素拖動過程中持續觸發。

（3）.dragend：當拖動操作的滑鼠鬆開時觸發此事件，無論是否位於目標元素內。

2.目標元素上觸發的事件：

（1）.dragenter：當拖動操作的滑鼠指標進入目標元素時觸發。

（2）.dragover：當拖動操作的滑鼠指標在目標元素內移動時觸發。

（3）.dragleave：當拖動操作的滑鼠指標離開目標元素時觸發。

（4）.drop：當拖動操作的滑鼠指標位於目標元素內，並鬆開滑鼠時觸發。

二.事件觸發順序：

拖拽事件的觸發遵循一定的順序，首先給出先後順序：

（1）.dragstart

（2）.drag

（3）.dragenter

（4）.dragover

（5）.dragleave

（6）.drop

（7）.dragend

當然這個順序要靈活看待，比如拖動源元素經過目標元素，然後直接拖出。

此時就不會有drop事件的觸發，整個過程也就沒有drop事件的觸發。

如果拖動源元素進入目標元素，併成功放下，此時沒有dragleave事件的觸發。

但是總體而言，事件的觸發是遵循上述順序，程式碼例項演示如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
p{
  width:100px;
  height:50px;
  background-color:red;
}
#box {
  width:300px; 
  height:100px;
  background-color:#ccc;
}
</style>
<script>
window.onload = (ev) => {
  let odiv=document.getElementById("box");
  let op=document.getElementById("p");
 
  // 源元素
  op.ondragstart = (ev) => {
    ev.dataTransfer.setData("Text",ev.target.id);
    console.log("螞蟻部落一");
  }
  op.ondrag = (ev) => {
    console.log("螞蟻部落二");
  }
  op.ondragenter = (ev) => {
    console.log("螞蟻部落三");
  }

  // 目標元素
  odiv.ondragover = (ev) => {
    ev.preventDefault();
    console.log("螞蟻部落四");
  }
  odiv.ondragleave = (ev) => {
    console.log("螞蟻部落六");
  }
  odiv.ondrop = (ev) => {
    ev.preventDefault();
    let data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    console.log("螞蟻部落五");
  }
  odiv.ondragend = (ev) => {
    ev.preventDefault();
    console.log("螞蟻部落七");
  }
}
</script>
</head>
<body>
<p draggable="true" id="p"></p>
<div id="box"></div>
</body>
</html>

大家可以開啟控制檯，然後拖拽元素自行測試觀察。

相關文章