标签：head char 内容 拖放 结束 end app 触发事件 一个
ondrag 事件在元素或者选取的文本被拖动时触发。
拖放是 HTML5 中非常常见的功能。 更多信息可以查看我们 HTML 教程中的 HTML5 拖放。
注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。
提示： 链接和图片默认是可拖动的，不需要 draggable 属性。
在拖放的过程中会触发以下事件：
注意： 在拖动元素时，每隔 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>
标签：head char 内容 拖放 结束 end app 触发事件 一个
原文地址：https://www.cnblogs.com/lguow/p/12234324.html
