如何在 HTML5 中使用拖放功能?
html5web developmentfront end technology更新于 2024/5/23 5:00:17
使用拖放功能，抓取对象并将其移动到其他位置变得更加简单，它非常动态且用户友好。用户可以点击元素并将其拖动到另一个位置，然后松开鼠标按钮将其放置到该位置。
拖放事件
拖放事件包含各种类型的事件，其中一些列于下方。
ondrag − 是 HTML 中的一个术语，用于描述元素或文本选择何时被移动。
ondragstart − 是在拖动操作即将开始时调用的函数。
ondragenter − 用于决定放置目标是否接受放置操作。如果接受了放置操作，则必须取消此事件。
ondragleave − 在拖动操作期间，当鼠标移离合法放置目标之前的元素时，会发生 ondragleave 事件。
ondragover − 它概述了拖动数据可能被放置的位置。
ondrop − 它描述了拖动操作完成后的放置位置。
ondragend − 当用户完成元素的拖动时，称为 ondragend 事件。
让我们深入研究以下示例，以进一步了解如何在 HTML5 中使用拖放功能。
示例 - (在两个框之间拖放)
在下面的示例中，我们将在两个框之间创建 ae 拖放图像盒子。
<!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function dragStart(ev) { ev.dataTransfer.setData("text", ev.target.id); } function dragDrop(ev) { preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> <style> .div1 { width: 240px; height: 75px; padding: 10px; border: 1px solid black; background-color: #F5F5F5; } p { font-size: 20px; font-weight: bold; } </style> </head> <body> <p>Image Drag and Drop in boxes</p> <div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> <img id="drag1" src= "https://www.cainiaomax.com/coffeescript/images/coffeescript-mini-logo.jpg" draggable="true" ondragstart="dragStart(event)" width="220" height="70"> </div> <br> <div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> </div> </body> </html>
执行上述脚本后，将生成两个框，并在第一个框中显示一张图片。当用户拖动图片时，会触发拖动事件;当用户将图片放入第二个框中时，则完成放置事件。
使用拖放功能进行数据传输
在整个拖放过程中，都会用到数据传输属性。该属性用于保存从源头提取的数据，并将其转储到需要的位置。
示例
以下示例演示了元素的可拖动属性的用法。
<!DOCTYPE HTML> <html> <script> function allowDrop(ev) { ev.preventDefault(); } function dragStart(ev) { ev.dataTransfer.setData("text", ev.target.id); } function dragDrop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> <style> #box { margin: auto; width: 50%; height: 200px; border: 3px solid green; padding: 10px; } #box1, #box2, #box3 { float: left; margin: 5px; padding: 10px; } #box1 { width: 50px; height: 50px; background-color: #F5B5C5; } #box2 { width: 100px; height: 100px; background-color: #B5D5F5; } #box3 { width: 150px; height: 150px; background-color: #BEA7CC; } p { font-size: 20px; font-weight: bold; text-align: center; } </style> </head> <body> <p>Drag and drop of boxes</p> <div id="box"> <div id="box1" draggable="true" ondragstart="dragStart(event)"> </div> <div id="box2" draggable="true" ondragstart="dragStart(event)"> </div> <div id="box3" ondrop="dragDrop(event)" ondragover="allowDrop(event)"> </div> </div> </body> </html>
脚本执行后，当用户开始拖放时，它会显示三个框。事件完成后，将使用数据传输。将数据从一个框中提取出来，然后转储到所需的框中是合理的。
