HTML5 new drag-and-drop API---(i)

HTML5 adds an API for drag-and-drop, which allows any element of an HTML page to become draggable by using a drag-and-drop mechanism to develop a more user-friendly interface for human-computer interaction.

A drag-and-drop operation can be divided into two actions: moving the mouse over an element (without releasing the mouse) and starting to drag, while dragging, as long as the mouse is not released, the event is generated-----This process is called "drag." Drag the dragged element onto another element and release the mouse-----This process is called "put".

First, start the drag and drop

In HTML5, the element is draggable by default, while the <a .../> element is draggable by default as long as the href attribute is set.

For normal elements, if you want to make it draggable, simply set the Draggable property of the element to true. But just setting the Draggable property of the element is not enough, because just setting draggable= ' true ' simply means that the element is draggable, but dragging does not carry data, so the user does not see the effect of dragging.

In order for a drag operation to carry data, you should specify a listener for the dragged element that specifies the ondragstart event, in which the drag operation can carry data.

    <Divstyle= "Width:150px;height:150px;background:rgba (195, 246, 0.31); border:1px solid gray;"ID= "Div1"draggable= "true">to drag a div</Div>    <Scripttype= "Text/javascript">        //Binding Drag Events        varDiv1=document.getElementById ('Div1'); Div1.ondragstart= function(e) {//Let the drag operation carry the dataE.datatransfer.setdata ('Text/plain','www.baidu.com'); }    </Script>

Second, accept the "put"

Display the suppress icon when dragging, the table dragged to the "destination" does not accept the dragged element-----This is because when the drag element passes through document, the Document object blocks the drag event by default, and the other HTML components are inside the document object, so they cannot accept the " Release ".

In order for document to accept "put", the listener should be specified for the Documen OnDragOver event, and the default behavior of the document on the drag event should be canceled in the listener.

Document.ondragover=function () {

Cancel the default behavior of an event

return false;

}

When the user drags the DIV element to the specified location, the Firefox browser opens a new page by default, and the URL of the page is the data that the drag-and-drop operation carries. If you use the Chrome browser to browse the page, chrome does not perform any default actions when the user drags and puts the DIV element to the specified location.

Thus, the default actions for drag-and-drop operations are not the same for different browsers, and if the developer cancels the default action for a drag-and-drop operation, the listener can be bound for the document's OnDrop event.

Document.ondrop=function (e) {

E.stoppropagation ();
E.preventdefault ();

Cancel default behavior

return false;

}

Instance:

    <ahref= "Http://www.baidu.com"ID= "Link1">Baidu Home</a>    <Scripttype= "Text/javascript">        varLink1=document.getElementById ('Link1'); //Link EventsLink1.onclick= function () {            //The experiment proves that the cancellation of the browser default action of the super-practice level return false;            //Cancel Default Action            return false; }        //Drag-and- drop processingDocument.ondragover= function(e) {e.stoppropagation ();        E.preventdefault (); } Document.ondrop= function(e) {e.stoppropagation ();            E.preventdefault (); //The experiment proves that in the drag-and- drop API, the default operation of Firefox is return false;            //return false;        }    </Script>

View Code

The following events may be triggered during user drag and drop of HTML elements

Event	Event Source	Describe
Ondragstart	The HTML element being dragged	This event is triggered when a drag operation starts
Ondrag	The HTML element being dragged	This event is constantly triggered during drag
Ondragend	The HTML element being dragged	Trigger the event at the end of the drag
OnDragEnter	The element that the mouse passes while dragging	The event is triggered when the dragged element enters the range of this element
OnDragOver	The element that the mouse passes while dragging	This event is constantly triggered when a dragged element is dragged into the range of this element
OnDragLeave	The element that the mouse passes while dragging	The event that is triggered when the dragged element leaves this element
OnDrop	The element that the mouse passes while dragging	This event is triggered when other elements are placed in this element

Instance:

    <Divstyle= "Width:150px;height:150px;background:rgba (195, 246, 0.31); border:1px solid gray;"ID= "Div1"draggable= "true">to drag a div</Div>    <ScriptTypee= "Text/javascript">        varDiv1=document.getElementById ('Div1'); Div1.ondragstart= function(e) {//Add carry DataE.datatransfer.setdata ('Text/plain', "www.baidu.com"); } document.ondragover= function () {            //Cancel Default Action            return false; } Document.ondrop= function(e) {//PIN to the specified location and show the carrying datadiv1.style.position= 'Absolute'; Div1.style.left=E.pagex+ 'px'; Div1.style.top=E.pagey+ 'px'; Div1.innerhtml=E.datatransfer.getdata ('Text/plain'); //Cancel Default Actione.stoppropagation ();        E.preventdefault (); }    </Script>

View Code

Third, DataTransfer object

Drag-and-drop triggered drag-and-drop events have a DataTransfer property, which is a DataTransfer object that contains the following properties and methods

• Datatransfer.dropeffect: Sets or returns the behavior that allows drag-and-drop on a drop target. If the drag-and-drop behavior set here no longer effectallowed within the various drag-and-drop behaviors of the property setting, the drag-and-drop operation will fail. This property allows only one of the four values for "none", "Copy", "link", and "move".
• Datatransfer.effectallowed: The setting returns the drag behavior that the dragged element allows to occur. The value of this property can be set to None, Copy, Copylink, Copymove, Link, linkmove, move, all, and uninitialized.
• Datatransfer.items: This property returns the Datatransferitems object that represents the drag data.
• Datatransfer.setdragimage (element,x,y): Sets the custom icon for the drag-and-drop operation. Where element sets the custom icon, the x sets the distance between the icon and the mouse in the horizontal direction, and the Y setting icon and the distance of the mouse in the vertical direction
• Datatransfer.addelement (Element): Add the Custom icon.
• Datatransfer.types: This property returns a Domstringlist object that contains all the types of data stored in the datatransfer.
• Datatransfer.getdata (format): Gets the data in format in the DataTransfer object.
• Datatransfer.setdata (Format,data): Sets the format data to the DataTransfer object. Where format represents the data format and data represents it.
• Datatransfer.cleardata ([format]): Clears the format data in the DataTransfer object. Omitting format format means clearing all the data in the DataTransfer object.
• Datatransfer.files: Gets a collection of similar arrays of external drag files (length). Each element in the collection has a type attribute, which in turn determines the type of file being dragged. The browsers that implement this attribute are ie10+, Firefox 3.5+, and Chrome.

With the DataTransfer object, you can make the drag-and-drop operation richer-----the developer can save the drag-and-drop source data to the DataTransfer object at the start of the drag-and-drop (ondragstart) event. The data is then read from the DataTransfer object at the end of the drag-and-drop so that more complex misplaced operations can be done.

Instance:

Iv. Drag and drop behavior

V. Change the drag-and-drop icon

HTML5 new drag-and-drop API---(i)