Html5 drag function implementation [conversion], html5 drag
Perform the following steps to implement drag-and-drop operations in HTML5:
1) set the draggable attribute of the drag-and-drop object element to true.
2) write the event processing Code related to drag and drop.
| Event | Elements that generate events | Description |
| Dragstart | Dragged object | Start drag and drop |
| Dragenter | The dragged object starts to enter the area. | Entry range |
| Dragover | Elements passing by the mouse (including the target object) during the drag-and-drop process) | On Element |
| Dragleave | Elements (including target objects) that move the mouse when dragging and dropping leaves) | Exit range |
| Drop | Target object | Put the dragged object down |
| Dragend | Dragged object | Drag and Drop ends |
Event occurrence sequence: dragstart-> dragenter-> dragover-> dragleave-> drop-> dragend
If there are two groups:
| Drag element (Event) | Target element to enter (event occurred) |
| Dragstart | Dragenter |
| Dragend | Dragover |
| Dragleve | |
| Drop |
You can learn how to drag and drop HTML5 in W3school.
1. The first example is a demo of deleting an icon.
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gbk"/>
<Title> Demo </title>
<Style>
Html, body {width: 100%; height: 100% ;}
. Wrapper {width: 580px; margin: 0px auto; margin-top: 80px ;}
Ul {list-style: none ;}
Li {float: left; margin-right: 20px ;}
Img {border-radius: 12px; width: 100px; height: 100px ;}
. Rubbish {position: absolute; bottom: 80px; background: url ("drag/220839emsyf6bty8sfgrxf.png ")
No-repeat; width: 128px; height: 128px; left: 50%; margin-left:-64px ;}
</Style>
</Head>
<Body>
<Div class = "wrapper">
<Ul>
<Li draggable = "true"> </li>
<Li draggable = "true"> </li>
<Li draggable = "true"> </li>
<Li draggable = "true"> </li>
</Ul>
</Div>
<Div class = "rubbish" id = "rubbish"> </div>
<Script>
Var iconarr = document. getElementsByTagName ("li"); // icon array var rubbishbin = document. getElementById ("rubbish"); for (var I = 0; I <iconarr. length; I ++) {iconarr [I]. ondragstart = function (ev) {/* drag start (dragged element) ondragstart cannot write preventDefault events */ev. dataTransfer. setData ("text", ev.tar get. id); // store the drag-and-drop element id */} rubbishbin. ondragover = function (ev) {/* drag an element to the header of the target element. */ev is indispensable. preventDefault ();} rubbishbin. ondrop = function (ev) {/* drag the element into the head of the target element. When the mouse is released, */ev. preventDefault (); if (window. addEventListener) {ev. stopPropagation ();} else if (window. attachEvent) {ev. cancelBubble = true;} var ul = document. getElementsByTagName ("ul") [0]; // drag img to Remove Li var node = document. getElementById (ev. dataTransfer. getData ("text ")). parentNode; ul. removeChild (node); rubbishbin. style. background = "url ('drag/220926qem3c3dsu53u8sha.png ') no-repeat ";}
</Script>
</Body>
</Html>
2. Use drag & drop to drag an object to change its position
<! Doctype html>
<Html>
<Head>
<Meta charset = "gbk"/>
<Title> Demo </title>
<Style>
Html, body {width: 100%; height: 100% ;}
. Wrapper {width: 500px; margin: 0px auto; margin-top: 80px ;}
Ul {list-style: none; width: 500px ;}
Li {float: left; margin: 0px 20px 20px 0px; position: relative; width: 132px; height: 132px ;}
Img {border-radius: 12px; width: 100px; height: 100px; position: relative;-moz-user-select: none; cursor: move ;}
. Rubbish {position: absolute; bottom: 80px; background: url ("empty.png ")
No-repeat; width: 128px; height: 128px; left: 50%; margin-left:-64px ;}
. Hover {border: 3px dashed # fff ;}
</Style>
</Head>
<Body>
<Div class = "wrapper">
<Ul>
<Li draggable = "true"> </li>
<Li draggable = "true"> </li>
<Li draggable = "true"> </li>
<Li draggable = "true"> </li>
<Li draggable = "true"> </li>
<Li draggable = "true"> </li>
<Li draggable = "true"> </li>
<Li draggable = "true"> </li>
<Li draggable = "true"> </li>
</Ul>
</Div>
<Script>
Var imgarrs = document. querySelectorAll ("img"); var dragnow = null; // The currently dragged object for (var I = 0; I 0) {return;} node. className = node. className? Node. className + "" + newclass: newclass;} function removeClass (node, className) {if (typeof node. classList! = 'Undefined') {node. classList. remove (className);} else {var classarr = node. className. split (/\ s +/); var arr = []; for (var I = 0; I <classarr. length; I ++) {if (classarr [I] = className) continue; arr. push (classarr [I]);} node. className = arr. join ("");}}
</Script>
</Body>
</Html>
In the second example, there is a bit of doubt:
I first wanted to use dataTransfer. setData ("url", src) is used to store src, but it is found that the value cannot be obtained when getData ("url") in IE9, so it is changed back to "text.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
