📌  相关文章
📜  HTML | DOM ondragstart 事件(1)

📅  最后修改于: 2023-12-03 14:41:48.363000             🧑  作者: Mango

HTML | DOM ondragstart 事件

简介

HTML | DOM ondragstart 事件是在被拖动元素拖动开始的时候触发的事件。在被拖动的元素上使用该事件，可以添加一些自定义的行为，比如展示拖动时的效果。该事件触发后，拖动动作就会开始，直到移动鼠标或松开鼠标键。

语法
object.ondragstart=function(){myScript};
兼容性
  • ondragstart 事件在所有主流浏览器中都能够很好地兼容。
代码演示

在下面的代码片段中，我们将创建一个 div 元素，给它添加 ondragstart 事件，并在开始拖动时改变其背景颜色为红色。当鼠标松开时，背景颜色将变回原来的颜色。

<!DOCTYPE html>
<html>
<body>

<div id="myDiv" draggable="true" ondragstart="drag(event)" style="width: 100px; height: 100px; background-color: grey;"></div>

<script>
function drag(event) {
  event.target.style.backgroundColor = "red";
}

function dragend(event) {
  event.target.style.backgroundColor = "grey";
}
</script>

</body>
</html>
总结

HTML | DOM ondragstart 事件是一个非常有用的事件，它可以在拖动开始时触发，通过添加自定义的行为，可以让拖动变得更加灵活和易用。同时，在使用该事件时，还需要注意浏览器兼容性问题，尽量写出兼容不同浏览器的代码。