Home > Developer > Web Develop
Drag-and-drop is a common feature that grabs an object and then drags it to another location.
In HTML5, drag-and-drop is part of the standard, and any element can be dragged and dropped.
First click on a small example: Execute JavaScript When the user starts to drag the <p> element
<draggable= "true" ondragstart= "MyFunction (event)"> Drag Me! </ P >
Tip: Links and pictures are draggable by default and do not require the Draggable property.
Definition and usageThe following events are triggered during the drag-and-drop process:
Internet Explorer + +, Firefox, Opera, Chrome, and Safari support drag.
Note: Safari 5.1.2 does not support dragging; When you drag an element, the OnDragOver event is triggered every 350 milliseconds.
InstancePaste the code first, and then explain it individually:
<!DOCTYPE HTML><HTML><Head><title>HTML5 Drag and drop</title><MetaCharSet= "Utf-8"><style>#div1{width:350px;Height:70px;padding:10px;Border:1px solid #aaaaaa;}</style></Head><Body><P>Drag the img_w3slogo.gif picture into the rectangle box:</P><DivID= "Div1"OnDrop= "Drop (event)"OnDragOver= "AllowDrop (event)"></Div><BR><imgID= "Drag1"src= "Images/img_w3slogo.gif"draggable= "true"ondragstart= "Drag (event)"width= "+"Height= "The "><Script>functionAllowDrop (EV) {Ev.preventdefault ();}functiondrag (EV) {Ev.dataTransfer.setData ("Text", ev.target.id);}functionDrop (EV) {ev.preventdefault (); varData=Ev.dataTransfer.getData ("Text"); Ev.target.appendChild (document.getElementById (data));}</Script></Body></HTML>
The effect of the page before dragging is:
The following respectively to parse the meaning of the above code.
Set elements can be dragged and droppedFirst, to make an element draggable, set the Draggable property to True:
What to drag-ondragstart and SetData ()<draggable= "true">
Then, specify what happens when the element is dragged.
In the example above, the Ondragstart property invokes a function, drag (event), which specifies the data to be dragged.
The Datatransfer.setdata () method sets the data type and value of the dragged data:
function drag (EV) { ev.dataTransfer.setData ("Text"In this example, the data type is "Text" and the value is the ID of the draggable element ("Drag1").
Where to put it-ondragoverThe OnDragOver event specifies where to place the dragged data.
By default, data/elements cannot be placed in other elements. If you need to set allow placement, we must block the default handling of elements.
This is done by calling the Event.preventdefault () method of the OnDragOver event:
To place-OnDropEvent.preventdefault ()
The drop event occurs when the dragged data is dropped.
In the example above, the OnDrop property invokes a function, Drop (event):
function Drop (EV) { ev.preventdefault (); var data=ev.datatransfer.getdata ("Text"); Ev.target.appendChild (document.getElementById (data));}Code Explanation:
Results of the implementation
Firefox browser drag and drop problemBut there's a problem in Firefox that's been found here:
HTML5 drag and drop, with the preventdefault to prevent pop-up page, but under the Firefox use?
Workaround:
function (event) { event.preventdefault (); Event.stoppropagation ();}HTML5 drag-and-drop (Drag and drop) detailed and 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
