Drag and drop is a common feature, that is, drag to another position after the capture object.
In HTML5, drag and drop is a standard part, and any element can be dragged and dropped.
First click a small example: execute JavaScript when the user starts to drag <p> elements
<p draggable = true ondragstart = MyFunction (EVENT)> Drag me! </P>
Tip: Links and pictures are dragged by default and do not need Draggable property.
Definition and usageThe following events will be triggered during the drag and drop process:
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support dragging.
Note: Safari 5.1.2 does not support drag; when dragging elements, the ONDRAGOVER event will be triggered every 350 milliseconds.
InstancePost the code first, and then explain one by one:
<! Doctype html> <html> <head> <Title> HTML5 Drag </Title> <Meta Charset = UTF-8> <STYLE>#DIV1 {width: 350px; height: 70px; Padding: 10px; Border: Border: Border: 1PX solid #Aaaaaa;} </style> </head> <body> <p> dragging img_w3slogo.gif picture to the rectangular box: </p> <div ID = div1 onDrop = Drop (EVENT) onDragover = Allowdrop (EVEN T )> </div> <br> <img ID = DRAG1 SRC = Images/IMG_W3SLOGO. GIF DRAGGable = True ONDRAGSTATATRT = DRAG (Event) Width = 300 Height = 56> <SCRIPT> Function Al Lowdrop (EV) {EV.PREVENTDEFALT ( );} Function Drag (EV) {EV.DATATRANSFER.SETDATA (Text, Ev.target.id);} Function Drop (EV) {EV.PreventDefault (); VAR DATA = EV.DATATRANSFETDATA ( Text); EV .target.appendchild (documen.getelementByid (data));} </script> </body> </html>The effect of the page before dragging is:
Let's analyze the meaning of the following code below.
Set the element can be dragged and droppedFirst of all, in order to make the element be dragged, set the DRAGGABLE property to true:
<IMG DRAGGABLE = TRUE>What to drag-ondragstart and setdata ()
It is then specified what happens when the element is dragged.
In the above example, the ONDRAGSTART property calls a function, DRAG (Event), which specifies the dragged data.
DATATRANSFER.SETDATA () method Set the data type and value of the data dragging data:
Function drag (EV) {EV.DATATRANSFER.SETDATA (Text, EV.TARGET.ID);}In this example, the data type is Text, and the value is ID (DRAG1) that can drag the element.
Where to put it-ONDRAGOVERThe ONDRAGOVER event stipulates where to place the dragged data.
Default, data/elements cannot be placed in other elements. If you need to set the allowable placement, we must prevent the default processing of elements.
This is to call the Event.preventDefault () method of the ONDRAGOVER event::):
event.preventdefault ()Putting-ONDROP
When the dragging data is placed, the Drop event occurs.
In the above example, the ONDROP attribute calls a function, Drop (Event):
Function drop (EV) {EV.PreventDefault (); VAR DATA = EV.DATATRANSFER.GetData (text); Ev.Target.appendchild (documeCode explanation:
The results of the implementation are as shown in the figure:
Datatransfer objectDuring the drag operation, we can use the Datatransfer object to transmit the data to perform other operations on the data when the drag operation is over.
Object attribute: Function Dragstart_handler (EV) {console.log (Dragstart); // Add the target element's id to the data transfer object ev.datatransfer.setdata (text/plain, EV.TARG ET.ID);} <body> <p ID = p1 draggable = true onDragStart = Dragstart_handler (event);> this element is drawgable. </p> </body> Define the drag's data Function Dragstart_handler (EV) {// Add the Drag Data EV.DATATRANSFER.SETDATA (Text/PLAIN, EV.TARGET.ID); Ev.datatransfer.setdata (text/html, <p> Example Par Agraph </p>); EV.DATATRANSFER.SETDATA (Text/Uri-List, http://developer.mozilla.org);} Define the drag image Function Dragstart_handler (EV) {// Create An Image and then USE It for the Drag Image. // Note: Change Example.gif to An Existing Image or The Image Created and the default drag image will be used. var IMG = New Image (); img.src = 'Example.gif'; Ev.datatransfer.setdragimage (IMG, 10, 10);};};} Define the drag effect Function Dragstart_handler (EV) {// set the drag effect to Copy EV.DATATRANSFER.DROPEFFECT = COPY;} Define a drop zone Function Dragover_handler (EV) {EV.PreventDefault (); // Set the DropFFECT to Move EV.DATATRANFECT = MOVE} Function Drop_handler (EV) {EV) .preventdefault (); // get the id of the target and add the Moved Element to the target's domine data = EV.DATATRANSFER.GETDATA (Text); Ev.Target.appendchild (Document.GetelementByid (data)); get onDrop = Drop_handler (Event); ONDRAGOVOVER = dragover_handler (event);> Drop Zone </div> </body> Firefox browser dragging problemBut go here and find a problem in the Firefox browser:
The drag of html5 uses PreventDefault to prevent the pop -up page from popping up, but it does not work under Firefox?
Solution:
document.body.ondrop = Function (event) {event.preventdeFault (); event.stopPropagation ();}Or for the above example, it is also possible to add to the ONDROP method:
Function Drop (EV) {EV.PreventDefault (); Ev.stoppropagation (); VAR Data = EV.DATATRANSFETDATA (Text); Byid (data);}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.