HTML5 Advanced-11 drag-and-drop API (drag-and-drop events, DataTransfer objects, Setdragimage methods)

First, drag and drop API

WEB Drag and drop

-On desktop applications, you can drag and drop elements from one location to another, but on the web, developers do not have a standard technology to do this, so it is not easy to implement this feature on the Web

-The drag-and-drop API has been introduced into the HTML5 standard, which makes it possible to develop Web applications that are identical to desktop applications

SOURCE Element Events

-Some new events are introduced in the drag-and-drop API, some of which are triggered by the source element (the dragged element), called the source element event, and other events are triggered by the target element (the element served by the source element)

-Source Element event:

-DragStart: Triggers this event when the drag operation starts

-Drag: Similar to the MouseMove event, which is triggered when a source element is dragged

-Dragend: The source element triggers this event when the drag operation finishes (whether or not it succeeds)

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/4E/wKiom1b7tezyOxtEAAFipIbySjQ547.png "title=" Web.png "alt=" Wkiom1b7tezyoxteaafipibysjq547.png "/>

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/49/wKioL1b7tqjAt9P9AAG-6LmvKEU215.png "title=" Web.png "alt=" Wkiol1b7tqjat9p9aag-6lmvkeu215.png "/>

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/4E/wKiom1b7thqCylY3AAEbkiei47U491.png "title=" Web.png "alt=" Wkiom1b7thqcyly3aaebkiei47u491.png "/>

Target Element Event

-The following is the event triggered by the target element

-DragEnter: During a drag operation, the entire event is triggered when the mouse pointer enters the target element area for the first time

-DragOver: Fires when an object is dragged to the target object

-Drop: The target element triggers this event when the drag operation executes within the target element

-DragLeave: Triggered when the dragged object leaves the target object during drag

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/4E/wKiom1b7tw7zZEf8AABDXQjj0sg668.png "title=" Web.png "alt=" Wkiom1b7tw7zzef8aabdxqjj0sg668.png "/>

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/49/wKioL1b7t9bTL9NrAAFcq__VAsw251.png "title=" Web.png "alt=" Wkiol1b7t9btl9nraafcq__vasw251.png "/>

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/4A/wKioL1b7t-rC6GH8AAFOmXznYIk924.png "title=" Web.png "alt=" Wkiol1b7t-rc6gh8aafomxznyik924.png "/>

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/4A/wKioL1b7uAbwS2C2AAFYtE6tGUQ927.png "title=" Web.png "alt=" Wkiol1b7uabws2c2aafyte6tguq927.png "/>

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/4E/wKiom1b7t4fgQm2XAADIbof7hGM734.png "title=" Web.png "alt=" Wkiom1b7t4fgqm2xaadibof7hgm734.png "/>

Second, DataTransfer object

DataTransfer Object Overview

-The DataTransfer object provides access to the predefined Clipboard formats for use in drag-and-drop. It is called possible by using a custom handling drag-and-drop operation

-You can save the data involved in the drag-and-drop process through the DataTransfer object

DataTransfer Object Acquisition Method

-In HTML5, the DataTransfer object can be obtained through the event arguments object

-The code is as follows:

var transfer = E.datatransfer;          function Mdragstart (event) {DStart = document.getElementById ("Start");          dstart.innerhtml = "Drag Start ...";      Event.dataTransfer.setData ("Text", "http://www.alibaba.com"); }

DataTransfer Object Methods

-The DataTransfer object provides methods for sharing data between the source element and the target element

-Method

-SetData (Type,data): Used to declare the data and type sent

-GetData (Type): Returns data for the specified type

-ClearData (type): Delete data of the specified type

Type value:

Text: Save Plain text

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/4E/wKiom1b7uXiDX33dAAFW7StYNRE863.png "title=" Web.png "alt=" Wkiom1b7uxidx33daafw7stynre863.png "/>

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/4E/wKiom1b7uZChx4BjAAEGhQvx01I613.png "title=" Web.png "alt=" Wkiom1b7uzchx4bjaaeghqvx01i613.png "/>

Setdragimage ()

-The Setdragimage method is used during a drag-and-drop operation to modify the image that the mouse pointer points to

Syntax

Event.dataTransfer.setDragImage (Image,x,y);

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/4E/wKiom1b7uo3D9N1TAADR7KgK3OE930.png "title=" Web.png "alt=" Wkiom1b7uo3d9n1taadr7kgk3oe930.png "/>

Summary: This chapter mainly introduces the following HTML5 drag-and-drop API (drag-and-drop events, DataTransfer objects, Setdragimage methods)

This article from the "Technical Exchange" blog, declined reprint!

HTML5 Advanced-11 drag-and-drop API (drag-and-drop events, DataTransfer objects, Setdragimage methods)