HTML DOM DragEvent

htmlweb developmentfront end technology更新于 2024/6/1 13:32:17

HTML DOM DragEvent 是一种事件，每当选定的文本被拖放时就会执行。此事件是在 HTML5 中引入的。

属性

以下是 HTML DOM DragEvent 的属性 −

属性	描述
dataTransfer	返回用户正在拖放的数据。

语法

以下是 DragEvent 的语法 −

Object.DragEventType= 函数名称;

此处，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>

输出

这将产生以下输出 −

拖动"拖动此!"文本，它将变为"拖动文本"。

将"拖动文本"放到第二个 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 事件关联的函数在获取 <p> 元素的 ID 后，使用其 innerHTML 属性将元素文本设置为"Span 元素正在被拖动"。当用户拖动文本时，会触发 ondrag 事件 −

Document.ondrag = function(event) {
   document.getElementById("Sample").innerHTML = "Span element is being dragged";
};

与 ondragover 事件关联的函数使用 event.preventDefault() 方法来阻止在拖动元素时发生的默认操作。当被拖动的元素位于预期目标 − 上方时，dragover 事件会定期触发。

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";
   }