Tag: Ack OLE src fix stop star head Tran date
Let's start by introducing the events generated during the HTML5 drag process:
If a is dragged inside B, the
1. A will trigger ondragstart, Ondrag, Ondragend, respectively, drag and drop to start, drag and drop the end of the drag and drop;
2. B will trigger OnDragEnter, OnDragOver, OnDragLeave, OnDrop, respectively, on behalf of a object into B, above B, from the top of B to leave, above B let go stop dragging;
3. If you drag a local file, the ondragstart event will not be triggered;
4. Data transfer between events using e.datatransfer.setdate (k, v) and E.datatransfer.getdata (k).
A few things to note:
0. Set the draggable property of A to true, although you do not set it can also be dragged;
1. The DOM default denies objects from being placed inside them, so you often use the
function (e) {E.preventdefault ();};To cancel the default event;
2. Some browsers default to open a as a link after drag and drop, so you need to use
function (e) {E.preventdefault ();};3. Firefox drag and drop pictures will open a new page, this is still annoying, the solution is to first get the BODY element, and then
function (e) { e.stoppropagation (); E.preventdefault (); Note that these two positions cannot be reversed};4. In Firefox, you cannot get the mouse position in real time through events such as Ondrag
function (e) { console.log (e.offsetx, e.offsety);};This will typically output two x 0
The workaround is to set up event snooping in document
function (e) { = e.originalevent | | e; = E.clientx | | E.pagex; = E.clienty | | E.pagey;}Here's an example that lets you drag a picture in an HTML page:
<!DOCTYPE HTML> <HTML> <HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <style>Body{margin:0;Min-height:700px;position:relative; }img{position:Absolute; Left:0;Top:0; } </style> </Head> <Body> <H3>can be dragged red sauce</H3> <imgID= "Chi"src= "Nyachichi.png"alt= "Chichiyan"draggable= "true" /> <Script> varChi=document.getElementById ("Chi"); varBody=document.getElementsByTagName ("Body")[0]; varOffsetX, OffsetY, X, y; Document.ondragover= function(e) {e=e.originalevent||e; X=E.clientx||E.pagex; Y=E.clienty||E.pagey; } body.ondragover= function(e) {e.preventdefault (); } Body.ondrop= function(e) {e.stoppropagation (); E.preventdefault (); Console.log ("Event Source Chi drag ends"); } Chi.ondragstart=function(e) {Console.log ('Event Source Chi starts dragging'); OffsetX=E.offsetx; OffsetY=E.offsety; }
Chi.ondrag=function(e) {<!--Console.log ('Event Source Chi in drag'); -} chi.ondragend=function(e) {e.preventdefault (); Chi.style.left=x-OffsetX+ "px"; Chi.style.top=y-OffsetY+ "px"; } </Script> </Body> </HTML>
HTML5 drag-and-drop API usage examples
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
