HTML5 drag-and-drop API usage

Last Update:2017-01-13 Source: Internet

Author: User

Tags event listener

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Before HTML5, if you want to implement drag-and-drop effect, generally use MouseDown, MouseMove and MouseUp three events to simulate the drag-and-drop effect, more trouble. The HTML5 specification realizes the primary drag-and-drop function, which makes the implementation of element drag-and-drop more convenient and efficient.

By default, images, links, and text can be dragged. Text can be dragged only when it is selected, and images and links are dragged at any time.

HTML5 sets a draggable attribute for all HTML elements, indicating whether the element is allowed to drag. To enable other elements to be dragged, you can set this property to True.

I. Steps to implement drag-and-drop:

1.1 Step 1: Create a drag-and-drop object:

1.1.1 If you want to drag an element, you need to set the Draggable property of the element to true.

1.1.2 Sets an event listener store for DragStart to drag and drop data.

document.getElementById ("Dragimg"). AddEventListener ("DragStart", function (event) {
Store drag-and-drop data and drag-and-drop effects ...
Event.dataTransfer.setData ("Text", ev.target.id);
}, False);
1.2 Step 2: Place the object:

Suppose the DOM of the drop object is:

<div id= "Dragtarget" ></div>
1.2.1 DragEnter event to determine whether the drop target accepts placement.

If the placement is accepted, then this event must be canceled.

document.getElementById ("Dragtarget"). AddEventListener ("DragEnter", function (event) {
Block Browser Default Events
Event.preventdefault ();
}, False);
1.2.2 DragOver event To determine how feedback is displayed to the user.

If this event is canceled, feedback (usually the cursor) is updated based on the value of the DropEffect property.

document.getElementById ("Dragtarget"). AddEventListener ("DragOver", function (event) {
Block Browser Default Events
Event.preventdefault ();
}, False);
1.2.3 Last is the drop event, allowing the object to be dropped.

document.getElementById ("Dragtarget"). AddEventListener ("Drop", function (event) {
Event.preventdefault ();
var data=event.datatransfer.getdata ("Text");
Event.target.appendChild (document.getElementById (data));
}, False);
1.3 Examples:

(Remark: reprinted from: Http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop)

<! DOCTYPE html>
<style type= "Text/css" >
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type= "Text/javascript" >
function AllowDrop (EV) {
Ev.preventdefault ();
}
function drag (EV) {
Ev.dataTransfer.setData ("Text", ev.target.id);
}
function Drop (EV) {
Ev.preventdefault ();
var data=ev.datatransfer.getdata ("Text");
Ev.target.appendChild (document.getElementById (data));
}
</script>
<body>
<p> please drag and drop the W3school picture into the rectangle:</p>
<div id= "Dragtarget" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" ></div>
<br/>

</body>

Two. Drag-and-drop related events:

Element description of event-generated events
DragStart drag-and-drop elements start drag
Drag drag-and-drop element drag-and-drop process
DragEnter drag-and-drop elements are dragged into the scope of this element.
DragOver drag-and-drop elements that are dragged through the mouse are moved within the scope of this element
DragLeave drag-and-drop elements that move the mouse through drag-and-drop elements away from the scope of this element
Drop drag-and-drop target element has other elements dragged into this element
Dragend drag-and-drop object element Drag-and-drop operation end
Three. Properties and methods of DataTransfer objects

3.1 The properties of the DataTransfer object:

The

Properties Description
dropeffect represents the visual effects of a drag-and-drop operation, allowing you to set values. The effect must be within the allowable visual range specified with the Effectallowed property, allowing the specified values to be: None, copy, link, move. The
effectallowed is used to specify the visual effects that are allowed when the element is dragged. The values you can specify are: None, copy, Copylink, Copymove, link, linkmove, all, uninitialize. The
files returns the filelist that represents the dragged file. The
types the MIME type that the data is stored in. If any file is dragged, then one of the types will be the string "files".
Method Description
void SetData (domstring format, domstring data) deposits data to datatransfer objects. The
domstring getData (domstring data) reads data from DataTransfer objects.
void ClearData (domstring format) Clears the data in the DataTransfer object. If the parameter format is omitted, all data is cleared.
void Setdragimage (element image, long x, long y) use an IMG element to set the drag-and-drop icon.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More