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>

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

相關文章