Home > Developer > Web Develop
Draggable is an enumeration property that specifies whether a label can be dragged or not. The following four types of values are available:
| true | means this element can be dragged |
| false | indicates that this element cannot be dragged |
| auto /td> | except img and tags with href The a tag means that it can be dragged, and the other labels indicate that they cannot be dragged |
| Any other value | means no drag |
Event:
"Dragged Element"
| Ondragstart | Trigger before dragging (mouse button down and start dragging) |
| Ondrag | Trigger during drag (continuous start, even if Mouse does not move) |
| Ondragend | Drag End Trigger |
"Target Element"
ondrop| ondragenter | Enter the target element |
| ondragover |   |
| release mouse momentarily triggers | |
| ondragleave& nbsp; |
The entire drag process sequence of events:
Ondragstart-ondrag-ondragenter-ondragover-ondragleave/ondrop-ondragend
Note: 1. If you want to trigger the OnDrop event, you need to block the default event in OnDragOver (the element is not allowed to be placed by default).
2. In Firefox 3.5+, if you drag and drop the image onto the drop target, the page will turn to the image file, and if you drag and drop the text onto the drop target, it will result in an invalid URL error, so in order for Firefox to support normal drag-and-drop, the default behavior of the drop event is also canceled. Block it from opening the URL.
About Event.datatransfer
| SetData (Key,value) | Two parameters are string types |
| GetData (Key) | GetData () can get a value saved by SetData () |
| Effectallowed | Set cursor style (none, copy, Copylink, Copymove, Link, linkmove, move, all and uninitialized); Setting in Event ondragstart |
| Setdragimage (element, x, y) | Specifies a pair of images that appear below the cursor when dragging occurs. The three parameters that this method accepts are the HTML elements to be displayed and the x and Y coordinates of the cursor in the image. where the HTML element (which can be a hidden element) can be an image, or it can be another element. Is the image, the image is displayed, and the other element shows the rendered element. Browsers that implement this method have Firefox 3.5+, Safari 4+, and Chorme |
| Files | Gets a collection of similar arrays of external drag files (length). Each element in the collection has a type attribute, which in turn determines the type of file being dragged. The browsers that implement this attribute are ie10+, Firefox 3.5+, and Chrome. |
Note: The DataTransfer object can only be accessed in the event handler for the drag-and-drop event.
The data saved in the DataTransfer object can only be read in the target element event handler.
About FileReader (read file information)
| Readasdataurl |
parameter is the file object to read, and the file is read as Dataurl |
| OnLoad |
This event is triggered when the read completes successfully, This.result gets the file data that is read, and if it is a picture, returns the picture data in base64 format |
Cases:
var fd=New FileReader (); Fd.readasdataurl (fs[0]); // the collection that FS obtains for Event.dataTransfer.files fd.onload=function() { alert (this. Result) } A complete example (drag-and-drop upload preview):
<HTML><Head> <title></title> <style> * {padding:0px;margin:0px; }#oDiv1{width:300px;Height:300px;Border:1px solid #000; } </style></Head><Body> <DivID= "ODiv1"></Div> <Script> varODiv1=document.getElementById ("ODiv1"); varODiv2=document.getElementById ("ODiv2"); Odiv1.ondragenter= function(EV) { This. Style.borderstyle= "Dashed"; } Odiv1.ondrop= function(EV) {varFiles=Ev.dataTransfer.files; for (varI= 0, F; F=files[i]; I++) { varReader= NewFileReader (); Reader.onload= (function(f) {return function() {odiv1.innerhtml= '' + This. Result+ '"title="' +F.name+ '" width=" 100% "/>'; }}) (f)//(function (f) {reader.onload = function (ev) { //odiv1.innerhtml = ' //}}) (f)Reader.readasdataurl (f); } This. Style.borderstyle= "Solid"; Ev.stoppropagation (); Ev.preventdefault (); } odiv1.ondragover= function(EV) {ev.stoppropagation (); Ev.preventdefault (); } Odiv1.ondragleave= function(EV) { This. Style.borderstyle= "Solid"; } </Script></Body></HTML> View Code
HTML5 drag and drop---(ii) turn
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
