HTML5 drag-and-drop (Drag and drop) feature development-Basic combat

With the popularity of HTML5 more and more high, now write code also encountered some, after colleagues on-demand to carry out a dojo activities for technical exchanges, I also take this opportunity to HTML5 drag and drop function to organize a bit.

Brief introduction

Drag-and-drop (Drag/drop) is a very common feature. In life, dragging and dropping items is actually a fairly common action. The program of "The World of Internet life" is also trying to simulate the "hand" operation with the mouse, to give the user a better experience, you can grab an object and drag it to the area you want to place. Many JavaScript are similar to the implementation of related functions, for example, jQueryUI Draganddrop components, such as "JS implementation page drag and drop ." In HTML5, drag-and-drop (Draganddrop) is a standard operation, supported by any element.

Defined

Drag-and-drop is a common feature that grabs an object and then drags it to another location.

In HTML5, drag-and-drop is part of the standard, and any element can be dragged and dropped.

Browser support

Although it is HTML5, however, according to the browser support shown in Findmebyip, Ie6~ie8 are drag & Drop API (see below).

Internet Explorer 6~9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.

Note: Drag-and-drop is not supported in Safari 5.1.2.

According to their own simple test, the low version of IE browser does support such as Ondragstart event, but will not recognize datatransfer error. It can be seen that IE is somewhat different from modern browsers in the handling of details.

HTML5 Drag and Drop instances

The following example is a simple drag-and-drop instance:

<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>ondragover= "AllowDrop ( Event) "></div> ondragstart= "Drag (event)" Width= "336" height= "the"/></body>

It may seem a little complicated, but we can study the different parts of the drag-and-drop event separately.

Set elements to be dragged and dropped

First, to make an element draggable, set the Draggable property to True:

<img draggable="true" />

What to drag-ondragstart and SetData ()

Then, specify what happens when the element is dragged.

In the example above, the Ondragstart property invokes a function, drag (event), which specifies the data to be dragged.

The Datatransfer.setdata () method sets the data type and value of the dragged data:

function Drag (EV) {ev.dataTransfer.setData ("Text", ev.target.id);}

In this example, the data type is "Text" and the value is the ID of the draggable element ("Drag1").

Where to put it-ondragover

The OnDragOver event specifies where to place the dragged data.

By default, data/elements cannot be placed in other elements. If you need to set allow placement, we must block the default handling of elements.

This is done by invoking the event for OnDragOver events. Preventdefault () Method:

event. Preventdefault ()

To place-OnDrop

The drop event occurs when the dragged data is dropped.

In the example above, the OnDrop property invokes a function, drop (event):

function Drop (EV) {ev.preventdefault (); var data=ev.datatransfer.getdata ("Text"); Ev.target.appendChild ( document.getElementById (data));}

Code Explanation:

• Call Preventdefault () to avoid browser default handling of data (the default behavior of the drop event is to open as a link)
• The dragged data is obtained by means of the Datatransfer.getdata ("Text") method. The method returns any data that is set to the same type in the SetData () method.
• The dragged data is the ID of the dragged element ("Drag1")
• Appends the dragged element to the placement element (the target element)

Drag-and-drop (Drag and drop) attribute lifecycles

Just now we have seen some new attribute nouns, such as ondragstart. Perhaps still very unfamiliar, do not know its so, look at a table below may be enlightened:

drag Raw Life cycle	Property	value	description
drag start	ondragstart	Script	executes the script at the start of the drag operation (the object is a dragged element)
Drag process	ondrag	script	as long as the foot This allows the script to be dragged (the object is dragged Element)
during drag	ondragenter	script	When the element is dragged to a legitimate drop When the target is set, the script is executed (object is the target element)
during drag	ondragover	script	as long as the element is dragging on a legitimate drop target , the script is executed (object is the target element)
during drag	ondragleave	script	When an element leaves a legitimate drop target (object is Target element)
drag end	ondrop	script	Run script (object is target element) when drag element is placed inside target element
Drag end	ondragend	script	run script at the end of a drag operation (object is dragged Element)

Where is it written?

In fact, referring to the above table "description" in parentheses in the tips can be known, but in order to be more intuitive to understand, the special code:

Drag and drop elements

<span draggable="true" id="Span1" ondragstart=" Foodragstart (this, event)  "ondrag="Foodrag (this, event)" ondragend="foodragend ( This, event)"><img src=". /images/yjj_1.png"></span>

Target element

<div  id="div1" ondrop="foodrop (this, event)"                             ondragenter="foodragenter (this, event)" ondragleave="  Foodragleave (This, event)"                            ondragover="foodragover (this,event)  ">                        </div>

Execution order

Below, I'll show you the entire script execution process that puts a picture in a div:

Introduction to execution elements

Execution result 1. Successfully dragged the picture into the Div

　　

Ondragstart, when an element is dragged to a legitimate drop target, the script is executed (the object is the target element) Ondrag, as long as the script is dragged to allow the script to Ondrag, as long as the script is dragged to allow the script ondragenter, Executes the script OnDragOver at the start of the drag operation, as long as the element is being dragged on a legitimate drop target, the script is executed (the object is the target element) Ondrag, as long as the script is dragged to allow the script to OnDragOver, as long as the element is dragging on a legitimate drop target. Executes script (object is target element)OnDrop, runs script ondragend at the end of the drag operation, runs the script at the end of the drag operation

2. Drag and drop, can not be placed in Div at last

Ondragstart, when an element is dragged to a legitimate drop target, the script is executed (the object is the target element) Ondrag, as long as the script is dragged to allow the script to Ondrag, as long as the script is dragged to allow the script ondragenter, Executes the script OnDragOver at the start of the drag operation, as long as the element is being dragged on a legitimate drop target, the script is executed (the object is the target element) Ondrag, as long as the script is dragged to allow the script to OnDragOver, as long as the element is dragging on a legitimate drop target. The script is executed (the object is the target element) Ondrag, as long as the script is dragged to allow script OnDragLeave, when the element leaves a legitimate drop target (object is the target element)Ondrag, as long as the script is dragged to allow the script Ondrag, Allows script Ondragend as long as the script is dragged, and runs the script at the end of the drag operation

The log from the last two execution sequence can be seen:

1. Only the "OnDrop" attribute is executed by placing the "dragged element" into the "target element";
2. "Ondrag" the event as long as the mouse is pressed and dragged will continue to execute;
3. The "OnDragOver" event is a continuous execution as long as the mouse is pressed and dragged and the dragged element is slid over the target element;
4. "Ondragend" event anyway, as long as the mouse is pressed and released, it will execute

Summary

Can read here to show that you are more diligent, watch me nag.

In the first step I've just introduced the basic features of HTML5 drag-and-drop (Drag and drop), and some in-depth examples such as "Drag and drop files," "Drag and drop from browser to desktop" and "drag and drop from desktop to browser" are explained in one by one of future articles.

Thanks for reading. If there is any inaccuracy in the text, please correct me.

HTML5 Drag-and-drop (Drag and drop) feature development-basic combat