Introduction to HTML5 Drag & Drop drag and drop

ArticleDirectory

• I. Previous words
• II. Key Points
• Iii. related instances
• 4. Conclusion

I. Previous words

HTML5 provides a dedicated drag-and-drop API, so you don't have to worry about implementing this effect in the future. However, considering that operabrowser does not seem to catch a cold on this, it remains to be discussed in terms of universality, so here we will briefly talk about it.

II. Key Points

1. DatatransferObject: the media used by the drag-and-drop object to be transmitted. Generally, event. datatransfer is used.
2. DraggableAttribute: that is, to set draggable = true for the label element, otherwise it will not work, for example:

   <Div Title = "Drag Me" draggable = "true"> List 1 </div>

3. OndragstartEvent: the event triggered when the drag element starts to be dragged. This event acts on the dragged element.
4. OndragenterEvent: the event triggered when the drag element enters the target element. This event acts on the target element.
5. OndragoverEvent: the event triggered when the drag element moves on the target element. This event acts on the target element.
6. OndropEvent: the event triggered by the drag-and-drop mouse over the target element. This event acts on the target element.
7. OndragendEvent: the event triggered after the drag operation is complete. This event acts on the dragged element.
8. Event. preventdefault ()Method: Disable the execution of some default event methods. Preventdefault () must be executed in ondragover; otherwise, the ondrop event will not be triggered. In addition, if you drag something from another application or file, especially the image, the default action is to display the image or related information, not to really execute drop. In this case, you need to use the ondragover event of document to kill it directly.
9. Event. receivtallowedAttribute: The drag effect.

Iii. related instances

To facilitate understanding of the above bold events, objects, and so on, we made a very simple demo page.

Click here: HTML5 Drag & Drop Delete Element Demo

The effect of this demo is to drag the list on the right to the DIV layer with the words "garbage bin" on the left, and the list elements will disappear from the planet. As shown in the following picture:

Source codeDisplay
The HTML structure is as follows:

 <  Div  Class  = "Dustbin"  > <  BR  /> Bytes <  BR  /> Bytes <  BR /> Box </  Div  >  <  Div  Class  = "Dragbox"  >      <  Div  Class  = "Draglist"  Title  = "Drag Me"  Draggable  = "True" > List 1 </  Div  >      <  Div  Class  = "Draglist"  Title  = "Drag Me"  Draggable  = "True"  > List 2 </  Div  >      < Div  Class  = "Draglist"  Title  = "Drag Me"  Draggable  = "True"  > List 3 </  Div  >      <  Div  Class  = "Draglist"  Title  = "Drag Me" Draggable  = "True"  > List 4 </  Div  >      <  Div  Class  = "Draglist"  Title  = "Drag Me"  Draggable  = "True"  > List 5 </ Div  >      <  Div  Class  = "Draglist"  Title  = "Drag Me"  Draggable  = "True"  > LIST 6 </  Div  >  </  Div  > <  Div  Class  = "Dragremind"  > </  Div  > 

JSCodeAs follows:

 VaR $ = Function  (Selector ){  /*  Simple selector Method  */  ...};  VaR Eledustbin = $ (". dustbin ") [0], eledrags = $ (". draglist "), ldrags = eledrags. length, eleremind = $ (". dragremind ") [0], eledrag = Null  ;  For ( VaR I = 0; I <ldrags; I + = 1 ) {Eledrags [I]. onselectstart = Function  (){  Return   False  ;}; Eledrags [I]. ondragstart = Function  (EV ){ /*  Drag to start  */          //  Drag Effect Ev. datatransfer. effectallowed = "move" ; EV. datatransfer. setdata ( "Text" , Ev.tar get. innerhtml); ev.datatransfer.setdragimage(ev.tar get, 0, 0 ); Eledrag = Ev.tar get;  Return   True  ;}; Eledrags [I]. ondragend =Function  (EV ){  /*  Drag to end  */  Ev. datatransfer. cleardata ( "Text" ); Eledrag = Null  ;  Return   False  };} Eledustbin. ondragover = Function  (EV ){  /* When the drag element moves on the head of the target Element  */  Ev. preventdefault ();  Return   True  ;}; Eledustbin. ondragenter = Function  (EV ){  /*  When you drag an element to the header of the target element  */      This . Style. color = "# ffffff" ;  Return   True ;}; Eledustbin. ondrop = Function  (EV ){  /*  Drag the element to the head of the target element, and when the mouse is released  */      If  (Eledrag) {eleremind. innerhtml = '<Strong> "' + eledrag. innerhtml + '" </strong> thrown into the garbage bin' ; Eledrag. parentnode. removechild (eledrag );}  This . Style. color = "#000000" ;  Return   False ;}; 

 

4. Conclusion

Today is the first day of work in the next year. I don't have much to worry about. Although HTML5, IE6 ~ IE8 has Drag & Drop API (see below ).

According to your own simple tests, earlier versions of IE do support events such as ondragstart, but reports errors that do not recognize datatransfer. It can be seen that IE is somewhat different from modern browsers in terms of details processing. However, at present, I don't have so many good spirits to drag and drop ie files, so please forgive me that the current demo is not moving on IE, and there is no effect or error. When you look back, you will surely make up some ie-related items.

Thank you for reading. If the expression is inaccurate, please correct me.

Original article, reproduced please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]
Address: http://www.zhangxinxu.com/wordpress? P = 1419