如何使用 JavaScript 拖放功能处理触摸设备?
在本文中,我们将讨论如何使用 JavaScript 拖放功能处理触摸设备。
使用 JavaScript,我们只能拖动图像和一些文本。要拖动图像,我们只需按住鼠标按钮然后移动它。要拖动文本,我们需要突出显示一些文本并以与图像相同的方式拖动它。
HTML5 规定几乎所有元素都可以拖动。要使元素可拖动,我们向其 HTML 元素标签添加值为 true 的 draggable 属性。
语法
以下是使元素可拖动的语法。
<div class="item" draggable="true"></div>
以下是可拖动元素上的事件。当我们拖动元素时,这些事件会按顺序触发。
dragstart
drag
dragend
当您按住鼠标按钮并开始移动鼠标时,dragstart 事件会在您正在拖动的可拖动元素上触发。在 dragstart 事件触发后,只要您拖动元素,drag 事件就会重复触发。并且,当您停止拖动元素时,会触发 dragged 事件。
当您将元素拖到有效的放置目标上时,这些事件会按以下顺序触发。
dragenter
dragover
dragleave 或 drop
只要您将元素拖到放置目标上,就会触发 dragenter 事件。
触发 dragenter 事件后,只要您将元素拖到放置目标的边界内,就会反复触发 dragover 事件。
当您将元素拖到放置目标的边界之外时,dragover 事件会停止触发,并触发 dragleave 事件。
如果您将元素放在目标上,则会触发 drop 事件而不是 dragleave 事件。
dragenter 的目标 (e.target), dragover、dragleave 和 drop 事件是放置目标元素。
示例
以下是触摸设备拖放的示例程序。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #div1, #div2 { float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; } </style> <script> function allowDrop(img) { img.preventDefault(); } function drag(img) { img.dataTransfer.setData("text", img.target.id); } function drop(img) { img.preventDefault(); var data = img.dataTransfer.getData("text"); img.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><br><br><br><br> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br><br><br><br><br><br> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
我们可以将图像、gif 和文本从 Web 文档中的一个地方拖放到另一个地方。