Home > Developer > Web Develop
<! DOCTYPE html>
<script type= "Text/javascript" >
function AllowDrop (EV) {
Ev.preventdeafault ();
}
function drag (EV) {
Ev.dataTranster.setData ("Text", ev.target.id);
}
function Drop (EV) {
var data=ev.datatransfer.getdata ("Text");
Ev.target.appendChild (document.getElementById (data));
Ev.preventdefault ();
}
</script>
<body>
<div id = "DIV1" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" ></div>
</body>
Very easy. You just need to change the drag property of an element to draggable, such as the following:
How to drag-ondragstart () and SetData () methods
- draggable="true"/>
We then specify the action that will be run when an element is dragged.
In the previous demo, the Ondragstart property called a method, drag (event). This specifies that the data is dragged.
The Datatransfer.setdata () method sets the data type and the data being dragged:
- function Drag (ev) {
- ev. DataTransfer . SetData ("Text",ev. ) Target . ID );
- }
In this example, the data type is "Text". The value is the ID of the dragged element.
Where to place (drop)-OnDragOverThe OnDragOver event specifies where the dragged element can be placed.
By default, the data/element cannot be drop to another element. In order to agree to the drop. You need to block the default processing first.
We can call the Event.preventdefault () method. For example, the following:
Run placement (drop)
- Event . Preventdefault ()
When the draggable data is drop. The drop event is triggered.
In the example above. The OnDrop property can call a method, Drop (event):
- function Drop (ev)
- {
- var Data = EV . DataTransfer . GetData ("Text");
- EV . Target . appendchild (document. getElementById (data));
- EV . Preventdefault ();
- }
The above code:
This method will return whatever data is set in the SetData () method.
Copyright notice: This article blog original article. Blogs, without consent, may not be reproduced.
HTML5 Drag the canvas/drag and drop
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
