This time I will show you how to implement H5 drag and drop, and what precautions should be taken to achieve the H5 drag and drop effect. The following is a practical case, let’s take a look.
Introduction
Drag-and-drop is a common feature where you grab an object and then drag it to another location.
In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.
First click on a small example: execute when the user starts dragging the
elementJavaScript
<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>
Tips: Link and Pictures are draggable by default and do not require the draggable attribute.
Definition and usage
The following events will be triggered during the drag and drop process:
Trigger events on the drag target (source element): ondragstart - triggered when the user starts dragging the element
ondrag - triggered when the element is being dragged
ondragend - triggered when the user finishes dragging the element
Event triggered when the target is released : ondragenter - This event is triggered when the object being dragged by the mouse enters the scope of its container
ondragover - This event is triggered when a dragged object is dragged within the scope of another object's container
ondragleave - This event is triggered when the object being dragged by the mouse leaves the scope of its container
ondrop - This event is triggered when the mouse button is released during a drag process
Browse The browser supports
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support dragging.
Note: Safari 5.1.2 does not support dragging; when dragging an element, the ondragover event will be triggered every 350 milliseconds.
Example
Post the code first, and then explain one by one:
<!DOCTYPE html> <html> <head> <title>HTML5拖拽</title> <meta charset="utf-8"> <style> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> </head> <body> <p>拖动img_w3slogo.gif图片到矩形框中:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56"> <script> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </body> </html>
I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website !
Related reading:
How to implement HTML table mouse drag sorting
What files does html belong to? How to open
What are the standard usage of comments in html, css and js
The above is the detailed content of How to implement drag and drop in H5. For more information, please follow other related articles on the PHP Chinese website!