Quite a lot of functions are implemented on the PC of HTML5, and dragging uploads are also used at work. This function is specifically recorded
Trigger event (source element) on the dragging target:ONDRAGSTART -Users trigger when the user starts to drag the element
ONDRAG -element is triggered when dragging
ONDRAGEND -User completion element drag trigger
Event triggered when releasing the target:ONDRAGENTER -Triggered this incident when the object dragged by the mouse enters its container
ONDRAGOVER -When a dragged object is dragged within the range of another object container, it triggers this incident
ONDRAGLEAVE -Trigger this incident when the object dragged by the mouse leaves the container
ONDROP -During a drag, it triggers this event when releases the mouse key
Coding
<html lang=en><head> <meta charset=UTF-8> <title>拖拽</title> <style> .box{width:800px;height:600px;float:left;} #box1{background- Color: #ccc;}#BOX2 {Background-COLOR:#000;} </style> </head> <body> <div id = box1 class = box> </div> <div ID = box2 class = box> </div> <img id=img1 src=1.jpg> <div id=msg></div></body><script>var box1Div,box2Div,msgDiv,img1; window.onload = function(){ box1Div = Document.GetelementByid ('Box1'); Box2div = Document.GetelementByid ('Box2'); msgdiv = document.GetelementByid ('msg'); img1 = DOCU MENT.GetelementByid ('IMG1'); Box1div.ondragover = Function (E ) {e.preventdeFAULT ();} Box2div.ondragover = Function (e) {e.preventdeFault ();} img1.ondragstart = function (e) d', 'IMG1');} Box1div.ondrop = Dropimghandler; Box2div.ondrop = Dropimghandler;} Function Dropimghandler (E) {showobj (e); // ; // Get the file e.preventdefault (); VAR IMG = Document.GetelementByid (E.Datatransfer.getData ('IMGID')); j) {s += k+:+obj [k]+<br/>;} msgdiv.innerhtml = s;} </script> </html>This function can drag the picture to the method in the two DIVs on the left and right. I think it is useless. It can be used as a Harbin Beer.
The following is a dragging and upload code. After the back -end PHP gets $ _Files, you can do it.
<! Doctype html> <html Lang = EN> <Head> <Meta Charset = UTF-8> <Title> Drag and drop up and upload </title> <style> #imgcontainer {background: #ccc; width: 500px; heig ht: 500px ;} </style> </head> <body> <div id = Imgcontainer> </div> <div ID = msg> </body> <Script> Var ImgContainer, msgdiv; window.onload = function (E) {ImgContainer = DOCUMENT.GetelementByid ('IMGContainer'); msgdiv = document.GetelementByid ('msg'); imgContainer.ondragover = funch (e) e.preventdefault ();} Imgcontainer.ondrop = Function (e) {e.preventdefault (); var f = e.datatransfer.files [0]; // At this time, the file has been obtained. For details, you want to use the first few files to process it by yourself. // The following is the process displayed in imgcontainer after obtaining the picture. // Var Filereader = New FileRereader (); // FileReader.onload = Function () {// ImgContainer.Innerhtml = <IMG SRC =/+FileRereader .Result+/ > //} // firster.readasdataurl (f); // showObj (e); // Show upload information // showObj (e.datatransfer.files); for (var k in obj) {s+= k+:+obj [k]+<br/>;} msgdiv.innerHtml = s;} </script> </html>The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.