Home > Developer > Web Develop
The premise of the drag-and-drop event is the source object and the target object, you drag the source object, the location you want to place is the target object, the difference between the two objects is because the HTML5 drag and drop event is different for the two.
events that can be triggered by the dragged source object:
1). ondragstart: Source object started to be dragged
2). Ondrag: The source object is being dragged (the mouse may or may not move)
3). Ondragend: The source object is dragged and ended
Drag the source object to enter an event that can be triggered by the target object above:
1). OnDragEnter: The target object is dragged into by the source object
2). OnDragOver: Target object is dragged by the source object hover over
(3) OnDragLeave: The source object dragged away from the target object
(4) OnDrop: The source object is dragged over the target object to release/Let go
Note: 1. The default behavior of the DragOver event must be blocked E.preventdefault to trigger the drop event!
1 function (e) {2// allows the drop event to trigger 3 }4function (e) {5 Do something ... 6 }2. To use jquery, be sure to remember that E is not the original event, but the event of jquery, which requires the use of E.originalevent.datatransfer
Expansion: HTML5 new File Manipulation objects
File: Represents a Document Object |
FileList: Represents a File list object, an array of classes
FileReader: Reading data from a file
FileWriter: Writing data to a file
With the file manipulation object, you can drag the client file directly to the server download page.
div.ondrop=function(e) { var f=e.datatransfer.files[0]; Document Object file varfr=new FileReader (); reads data from the file object Fr.readasdataurl (f); read URL data from file fr.onload=function() { img.src=fr.result; }} The complete code is as follows:
1 //Example: The user drags the picture onto the server2<! DOCTYPE html>345<meta charset= "UTF-8" >6<title></title>7<style>8 #container {9 border:1px solid #aaa;Tenborder-radius:3px; One padding:10px; A margin:10px; -min-height:400px; - } the</style> - -<body> - + -<div id= "Container" > + A</div> at -<script> - //Listen for the drop event of document--cancels its default behavior: Opens the picture in a new window -Document.ondragover =function(e) { -E.preventdefault ();//causes the drop event to trigger - } inDocument.ondrop =function(e) { -E.preventdefault ();//prevent opening a picture in a new window to } + - //Listen for the Div#container drop event, try to read the released picture data, show it theContainer.ondragover =function(e) { * E.preventdefault (); $ }Panax NotoginsengContainer.ondrop =function(e) { -Console.log (' Client dragged a picture released ... ')) the //The current target object reads the data stored by the drag-and-drop source object + //Console.log (E.datatransfer);//Display Problems A //Console.log (e.datatransfer.files.length);//number of pictures dragged in the varF0 = E.datatransfer.files[0]; + //Console.log (F0);//Document Object file - $ //reading data from a file object $ varFR =NewFileReader (); - //Fr.readastext (F0);//reading a text string from a file -Fr.readasdataurl (F0);//reading URL data from a file theFr.onload =function(){ -Console.log (' Read file complete '))Wuyi Console.log (fr.result); theVarimg =NewImage (); -IMG.SRC = Fr.result;//URL Data Wu Container.appendchild (IMG); - } About } $ -</script> -</body> - A Drag
HTML5 new properties and features six-drag events
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
