Drag and drop are part of the HTML5 standard.
Drag and drop
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.
Browser support
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support dragging.
Note: Safari 5.1.2 does not support dragging.
HTML5 drag and drop example
The following example is a simple drag and drop example:
<!DOCTYPE HTML> <html> <head> <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> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
It may look a bit complicated, but we can study different parts of the drag and drop event separately.
Set the element as draggable
First, in order to make the element draggable, set the draggable attribute to true:
<img draggable="true">
What to drag - ondragstart and setData()
Then, specify what happens when the element is dragged.
In the above example, the ondragstart attribute calls a function, drag(event), which specifies the data to be dragged.
dataTransfer.setData() method sets the data type and value of the dragged data:
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
[Related recommendations]
1. Special recommendation: "php Programmer Toolbox" V0.1 version download
2. Free h5 online video tutorial
3. php.cn original html5 video tutorial
The above is the detailed content of HTML5 drag and drop (Drag and drop) examples explained. For more information, please follow other related articles on the PHP Chinese website!