HTML | ondrag 事件属性

ondrag 事件属性是一种在 HTML 元素上绑定拖动事件的方法。通过指定 ondrag 属性，程序员可以在元素上绑定当拖动发生时触发的自定义 JavaScript 函数。

用法

<div ondrag="dragFunction(event)">拖我</div>

在示例中， ondrag 事件属性被用于绑定一个自定义的JavaScript函数 dragFunction。 这个函数需要一个事件参数 event。

事件参数

当拖动事件被触发时，浏览器会提供一个事件对象 event。这个事件对象包含关于拖动事件的详细信息，如鼠标的坐标和被拖动元素的位置等等。 通过将 event 对象传递给自定义 JavaScript 函数，程序员可以获得有关拖动事件的任何信息。

事件类型

有一系列与拖动相关的事件。 ondrag 事件属性只是其中之一。下面是所有拖动事件：

• ondragstart - 当拖动开始时执行的脚本
• ondrag - 当正在拖动元素时执行的脚本
• ondragend - 当拖动结束时执行的脚本
• ondragenter - 在可拖动的元素进入放置目标时执行的脚本
• ondragover - 当可拖动的元素在放置目标上方时执行的脚本
• ondragleave - 当可拖动的元素离开放置目标时执行的脚本
• ondrop - 当可拖动的元素被放置在目标上时执行的脚本

示例

<div draggable="true" ondragstart="drag(event)">拖我</div>
<div ondragover="allowDrop(event)" ondrop="drop(event)">放在我这里</div>

<script>
function drag(event) {
  event.dataTransfer.setData("text", event.target.id);
}

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
}
</script>

在此示例中， ondragstart 事件属性用于将要拖动的元素标记为可拖动，并将其ID设置为拖动数据。 ondragover 事件属性用于防止放置事件的默认行为， ondrop 事件属性用于响应放置事件。