In HTML5, it has been supported to drag data between browsers and other applications, while also greatly simplifying the code for drag and drop.
Steps to implement drag and drop
In HTML5, there are at least two steps to implement a drag-and-drop operation:
- Set the Draggable property of the object element you want to drop to True (draggable= "true"). This allows the element to be dragged and dropped. In addition, the IMG element and a element (the href attribute must be specified) are allowed to drag and drop by default.
- Write event-handling code related to drag-and-drop. A few events about drag-and-drop exist as shown below.
Related events for drag and drop
| Event |
The element that generated the event |
Describe |
| DragStart |
The element being dragged and dropped. |
Starts the drag-and-drop operation. |
| Drag |
The element being dragged and dropped. |
During the drag-and-drop process. |
| DragEnter |
The element that the mouse passes through during drag and drop. |
The dragged element begins to enter within the scope of this element. |
| DragOver |
The element that the mouse passes through during drag and drop. |
The dragged element is moving within the scope of this element. |
| DragLeave |
The element that the mouse passes through during drag and drop. |
The dragged element leaves the scope of this element. |
| Drop |
The target element to drag and drop. |
There are other elements that have been dragged and dropped into this element. |
| Dragend |
The target element to drag and drop. |
The drag-and-drop operation ends. |
Drag and drop examples for example, for ease of use, add the following function for jquery:
JS Code
- JQuery.fn.dragstart = Function (handler) {
- return This.each (function () {
- This.addeventlistener ("DragStart", Handler, false);
- });
- };
- JQuery.fn.drag = Function (handler) {
- return This.each (function () {
- This.addeventlistener ("Drag", Handler, false);
- });
- };
- JQuery.fn.dragenter = Function (handler) {
- return This.each (function () {
- This.addeventlistener ("DragEnter", Handler, false);
- });
- };
- JQuery.fn.dragover = Function (handler) {
- return This.each (function () {
- This.addeventlistener ("DragOver", Handler, false);
- });
- };
- JQuery.fn.dragleave = Function (handler) {
- return This.each (function () {
- This.addeventlistener ("DragLeave", Handler, false);
- });
- };
- JQuery.fn.drop = Function (handler) {
- var handler1 = Function (event) {
- Handler (event);
- Event.preventdefault ();
- Event.stoppropagation ();
- };
- return This.each (function () {
- This.addeventlistener ("Drop", Handler, false);
- });
- };
- JQuery.fn.dragend = Function (handler) {
- var handler1 = Function (event) {
- Handler (event);
- Event.preventdefault ();
- };
- return This.each (function () {
- This.addeventlistener ("Dragend", Handler, false);
- });
- };
The sample HTML page code used by the drag-and-drop operation is as follows:
HTML code
- <! DOCTYPE HTML>
- <html lang= "zh-cn" dir="ltr">
- <head>
- <meta charset="UTF-8" />
- <title> Cast Example </title>
- <script type="Text/javascript" src=". /js/jquery-1.6.4.js "></script>
- <script type="Text/javascript" src=". /js/dragdrop.js "></script>
- </head>
- <body>
- <H1> Simple drag-and-drop example </H1>
- <div id=< Span class= "Attribute-value" > "Dragme" draggable= " True " style=" width:200px; border:1px solid gray; "> please cast </div >
- <div id="text" style="width:200px; height:200px; border:1px solid Gray; "></div>
- </Body>
- </html>
The JavaScript code for the drag-and-drop operation is as follows:
JS Code
- $ (function () {
- $ (document). DragOver (function (event) {
- Event.preventdefault ();
- });
- $ ("#dragme"). DragStart (function (event) {
- var dt = Event.datatransfer;
- dt.effectallowed = ' all ';
- Dt.setdata ("Text/plain", "Hello World");
- });
- $ ("#text"). Dragend (function (event) {}). Drop (function (event) {
- var dt = Event.datatransfer;
- var text = dt.getdata ("Text/plain");
- $ (this). append (text);
- });
- });
Code Essentials Description:
- When you start dragging (the DragStart event occurs), the data you want to drag is stored in the DataTransfer object (SetData () method). The DataTransfer object is designed to hold the data to be carried when dragging and dropping, and it can be set to drag the DataTransfer property of the event object. The first parameter in the SetData () method is a string of data types that carry data, and the second parameter is the data to be carried. The first parameter indicates that the data types in the string can only be populated with words like "text/plain" or "text/html" that represent MIME types, and cannot be filled in with other text.
- If you put "Dt.setdata (" Text/plain "," Hello World. ")" Instead of "Dt.setdata (" Text/plain ", This.id)", because the ID of the dragged element is taken as an argument, the data that is carried is the data in the dragged element, because the browser automatically reads the data in the element when it reads the data using the GetData () method.
- For a drag-and-drop target element, you must call the "Event.preventdefault ()" method within the Dragend or DragOver event. Because by default, the target element of the drag and drop is not allowed to accept the element, in order to drag and drop the element into it, the default processing must be closed.
- After the target element is accepted to the dragged element, the GetData () method is executed to obtain the data from the datatransfer. The parameter of the GetData () method is the type of data specified in the SetData () method.
- To implement the drag-and-drop process, you must also turn off default processing in the drop event of the target element (deny drag-and-drop), or the target element cannot accept the dragged element.
- To implement the drag-and-drop process, you must also set the entire page to not perform the default processing (Deny drag-and-drop), or drag-and-drop processing cannot be implemented. Because the page accepts drag-and-drop before other elements, if you reject drag-and-drop on the page, the other elements on the page cannot accept drag-and-drop.
- To use an element can be dragged and dropped, the element's Draggable property must first be set to true. In addition, in order for this example to work correctly in all browsers that support the drag-and-drop API, you need to specify a WebKit-specific CSS property such as "-webkit-user-drag:element".
- The kind of data in this example uses the MIME type "Text/plain", or you can drag data from that type into the target element from other applications that use the same MIME type. The types of mime that are now supported for drag processing are: "Text/plain (text text)", "text/html (HTML text)", "Text/xml (XML text)", "Text/uri-list (URL list, one line per URL)".
Properties and methods of DataTransfer objects
If the properties and methods of the DataTransfer object are used well, you can implement a custom drag-and-drop icon that supports only specific drag-and-drop (such as copy, move, and so on) and even more complex drag-and-drop operations:
- DropEffect Property: Represents the visual effect of a drag-and-drop operation, allowing the setting of its value. The effect must be allowed to specify a value of None, copy, link, move, within the range of the allowed visual effects specified with the Effectallowed property.
- Effectallowed property: Used to specify the visual effects allowed when an element is dragged and dropped, the values you can specify are: None, copy, Copylink, Copymove, Link, linkmove, move, all, unintialize.
- Type attribute: A pseudo-array of strings stored in the type of data.
- void ClearData (domstring format) method: Clears the data stored in the DataTransfer object, and clears the entire data if the argument is omitted.
- void SetData (domstring format, domstring data) method: Stores the information into the DataTransfer object.
- Domstring getData (domstring format) method: Reads data from the DataTransfer object.
- void Setdragimage (element image, long x, long Y) method: Use the IMG element to set the drag-and-drop icon (some browsers can be set with other elements such as canvas).
The SetData () method stores data in the DataTransfer object at the start of a drag-and-drop, uses the Type property to specify the data MIME type, and the GetData () method reads the data from the DataTransfer object at the end of the drag. The ClearData () method can be used to clear data within a DataTransfer object.
Set the visual effect when dragging and dropping
The DropEffect property is combined with the Effectallowed property to set the visual effect when dragging and dropping. The Effectallowed property indicates that the visual effect allowed when an element is dragged is typically set in the Ondragstart event, allowing the set value to be none, copy, Copylink, Copymove, Link, linkmove, move, All, unintialize. The DropEffect property represents the visual effect of the actual drag-and-drop, typically specified in the OnDragOver event, allowing the set value to be none, copy, link, move. The actual visual effect represented by the DropEffect property must be within the range of allowed visual effects represented by the Effectallowed property. The rules are as follows:
- If the Effectallowed property is set to None, drag-and-drop elements are not allowed.
- If the DropEffect property is not set to none, it is not allowed to be dragged into the target element.
- If the Effectallowed property is set to all or not set, the DropEffect property allows to be set to any value and is displayed as a specified visual effect.
- If the Effectallowed property is set to a specific effect (not none, all) and the DropEffect property has a specific visual effect, the two specific effect values must be exactly equal, otherwise drag-and-drop elements are not allowed to be dragged into the target element.
JS Code
- $ ("#dragme"). DragStart (function (event) {
- var dt = Event.datatransfer;
- dt.effectallowed = ' copy ';
- Dt.setdata ("Text/plain", "Hello.");
- });
- $ ("#text"). DragOver (function (event) {
- var dt = Event.datatransfer;
- Dt.dropeffect = ' copy ';
- Event.preventdefault ();
- });
Custom drag-and-drop icons
In addition to using the Effectallowed property and the DropEffect property above, the HTML5 also allows you to customize the drag-and-drop icon--a small icon located in the lower part of the mouse pointer while dragging an element with the mouse.
The DataTransfer object has a Setdragimage () method that has three parameters, the first parameter image is set to the icon element of the drag-and-drop icon, and the second parameter is the amount of displacement of the drag-and-drop icon from the x-axis direction of the mouse pointer, The third parameter is the amount of displacement of the drag-and-drop icon from the y-axis direction of the mouse pointer.
JS Code
- $ (' #dragme '). DragStart (function (event) {
- var dt = Event.datatransfer;
- Dt.setdragimage (' img '). attr ("src", "images/img1.jpg") [0],-10,-10);
- Dt.setdata ("Text/plain", "Welcome");
- });
HTML5 Drag-and-drop API2
