Reference tutorial address: http://www.w3school.com.cn/html5/html_5_draganddrop.asp
<!DOCTYPE HTML>
Tutorial:
Set the element to drag and dropFirst, set the draggable attribute to true to make the element drag:
Drag-ondragstart and setData ()Then, specify what will happen when the element is dragged.
In the preceding example, the ondragstart attribute calls a function (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",ev.target.id);}In this example, the data type is "Text", and the value is the id ("drag1") of the element that can be dragged ").
Where to put-ondragoverThe ondragover event specifies where to place the dragged data.
By default, data/elements cannot be placed in other elements. To allow placement, We must block the default Processing Method for elements.
You must call the ondragover eventEvent. PreventDefault () method:
event.preventDefault()Place-ondropA drop event occurs when data is dragged.
In the preceding example, the ondrop attribute calls a function (Event):
function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}Code explanation:
Drag and Drop each other:
<!DOCTYPE HTML>
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
