定义和用法
ondrag 事件在元素或者选取的文本被拖动时触发。
拖放是 HTML5 中非常常见的功能。 更多信息可以查看我们 HTML 教程中的 HTML5 拖放。
注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。
提示： 链接和图片默认是可拖动的，不需要 draggable 属性。
在拖放的过程中会触发以下事件：
- 在拖动目标上触发事件 (源元素):
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发
- ondragend - 用户完成元素拖动后触发
- 释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
注意： 在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。
<!DOCTYPE html> <html lang="en"> <head> <title>拖动事件</title> <meta charset="utf-8"> <style> .box{ width: 200px; height: 100px; border: 1px solid #c0a; margin: 20px; float: left; } </style> </head> <body> <div class="box"> <p id="p" draggable="true" ondragstart="dragStart(event)" ondrag="drag(event)" ondragend="dragEnd(event)" > 要拖动的内容</p> </div> <div class="box" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="dragOver(event)" ondrop="drop(event)" id="dropBox" ></div> <script> //event事件对象，事件绑定在谁身上就是谁 var log = console.log; function dragStart(event){ //开始拖动时触发，事件对象是拖动元素本身 log(`dragStart`,event) } function drag(event){ //拖动中触发 ondrag事件每350毫秒触发一次 //log('drag',event) } function dragEnd(event){ //拖动结束时触发 log('dragEnd',event) } function dragEnter(event){ //拖动的元素进入放置的目标时触发, 事件对象是目标元素 log('dragEnter',event) } function dragLeave(event){ //离开时触发 log('dragLeave',event) } function dragOver(event){ event.preventDefault(); //log('dragOver',event) } function drop(event){ event.preventDefault(); log('drop',event) var p = document.querySelector('#p'); var dropBox = document.querySelector('#dropBox'); dropBox.appendChild(p) } </script> </body> </html>