HTML5 Drag and drop---drag and drop

Drag and drop four-step walk:
The first step: Set the element to drag and drop, that is, set the Draggable property to True:
Example: <div id= "div" draggable= "true" ></div>
Part Two: Dragging what--ondragstrat and SetData ()
Example: function drag (EV) {
Ev.dataTransfer.setData ("Text", ev.target.id);
}
In the example above, the data type is "Text" and the value is the ID of the element that can be dragged ("div");

Expand:

DataTransfer Object : He provides access to the predefined clipboard formats, which means that during the drag-and-drop process, data can be transferred through the DataTransfer object to perform other operations on the data at the end of the drag operation. Properties of the object: Dropeflect: Sets or returns the drag-and-drop behavior that is allowed on the drop target. The values for this property are: "null", "copy", "link", "Move".

Effectallowed: Sets or returns the drag behavior allowed by the dragged element, with the following values: "None", "Copy", "Copylink", copymove "," link "," Linkmove "," Move "," All "," Uninitialized ".

There are 5 methods of DataTransfer objects:

1.setData (format,data): Assigns data of the specified format to the DataTransfer object, format defines the data type, and data is the value to be assigned.

2.getData (format): Gets the data in the specified format from the DataTransfer object.

3.clearData ([format]): Removes the formatted data from the DataTransfer object, with optional parameters.

4.addElement (Element): Add a custom icon.

5.setDragImage (Element,x,y): element sets the custom icon, x sets the distance between the icon and the mouse in the horizontal direction, and the Y setting icon is the distance from the mouse in the vertical direction.

Step three: Where to put-ondargover
The OnDragOver event specifies where to place the dragged data. By default, data/elements cannot be placed in other elements. If you want to allow placement, you must block the default processing mode. Here by calling the Event.preventdefault () method of the OnDragOver event:

Event.preventdefault ();

Fourth step: Placing the-ondrop
A drop event occurs when the drop data is dropped, for example:

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

The OnDrop event triggers the following event during a draggable process:
1. Trigger the event on the drag target (source element):
A.ondragstart: Triggered when the user starts to drag an element;
B.ondrag: Triggered when the element is being dragged;
C.ondragend: Triggered when the user finishes dragging.
2. Event triggered when releasing a target:
A.ondragenter: Triggered when the dragged object enters the container range;
B.ondragover: This event is triggered when a dragged object is dragged within the scope of another object container;
C.ondragleave: Triggered when the dragged object is in the range of its container;
D.ondrap: This event is triggered when the mouse button is released during a drag.

Here is a partial code for a drag-and-drop Sudoku game:

functionAllowDrop (EV) {Ev.preventdefault ();}functiondrag (EV) {Ev.dataTransfer.setData ("Text", ev.target.id);}functionDrop (EV) {ev.preventdefault (); varData=ev.datatransfer.getdata ("Text"); Ev.target.appendChild (document.getElementById (data));}varDel=[];functionstart () {varAcard=document.queryselectorall (". Card")); varObox=document.getelementbyid ("box"); varOcontainer=document.queryselector (". Container"); varAtd=document.getelementsbytagname ("TD"); varlist=[]; varcount=10; varCnode=NULL;  for(vari=0;i<atd.length;i++) {//find out all the empty squares    if(atd[i].innerhtml== "") {List.push (atd[i]); }  }     for(vari=0;i<acard.length;i++){        varthat=NULL; Acard[i].ondragstart=function(){//Start dragging elementsdrag (event); that= This; }         for(varj=0;j<list.length;j++) {List[j].ondragover=function(){//let all empty grids block browser from default actions on dataAllowDrop (event); } List[j].ondrop=function() {CNode=that.clonenode (true);           Ocontainer.appendchild (CNode); That.id= "card" +count; Count++;           Drop (event);           Del.push (CNode);           Dele (); }}}}start ();functiondele () {varOdelete=document.getelementbyid ("Delete");  for(vart=0;t<del.length;t++) {Del[t].ondragstart=function(){//Start dragging elementsdrag (event); } odelete.ondragover=function() {AllowDrop (event); } Odelete.ondrop=function() {drop (event);  This. innerhtml= ""; }  }}functionCheck () {varObtn=document.getelementbyid ("BTN"); Obtn.onclick=function() {Iswin (); }}

Complete code, see Https://github.com/zhangyudan/a_little_game.

HTML5 Drag and drop---drag and drop