HTML5 Mobile Development Road (16)--Magical drag and drop function

This paper is the official HTML5 training course for Brother Lian it education organization, mainly introduces: HTML5 Mobile Development Road (16)--Magical drag and drop function

In the rapid development of smart phones now drag-and-drop functionality has become a fashion, but in our browser is not yet missing this convenient function? There are standards for drag and drop in HTML5 's new standard, and any element can be dragged and dropped as part of the HTML5 standard.

First, browser support situation

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

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

Ii. Methods of Use

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

[HTML] view plain copy

Print? 650) this.width=650; "src=" Https://code.csdn.net/assets/CODE_ico.png "alt=" on Code View "Width=" "height=" 12 " Style= "border:0px;"/>650) this.width=650; "src=" Https://code.csdn.net/assets/ico_fork.svg "alt=" Derivation to My Code slice " Width= "height=" style= "border:0px;"/>

1. <img draggable="true" />

Then, what happens when the specified element is dragged

Let the Ondragstart property call a function and return a drag object to the function

[HTML] view plain copy

 print? 650) this.width=650; "src=" Https://code.csdn.net/assets/CODE_ico.png "alt=" View the Code slice "width=" and "height=" style = "border:0px;"/>650) this.width=650; "Src=" Https://code.csdn.net/assets/ico_ Fork.svg "alt=" To My Code slice "width=" "height=" "style=" border:0px "/>

1. <img id="Drag1" src="img_logo.gif" draggable="true"

2. ondragstart="Drag (Event)" width="336" height=" "/>

The Datatransfer.setdata () method sets the data type and value of the dragged data: (we pass the ID of the dragged object to DataTransfer)

[HTML] view plain copy

Print? 650) this.width=650; "src=" Https://code.csdn.net/assets/CODE_ico.png "alt=" on Code View "Width=" "height=" 12 " Style= "border:0px;"/>650) this.width=650; "src=" Https://code.csdn.net/assets/ico_fork.svg "alt=" Derivation to My Code slice " Width= "height=" style= "border:0px;"/>

1. function drag (EV)

2. {

3. <span style="White-space:pre"> </span>ev.datatransfer.setdata ("Text",  Ev.target.id);

4. }

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 calling the Event.preventdefault () method of the OnDragOver event:

[HTML] view plain copy

Print? 650) this.width=650; "src=" Https://code.csdn.net/assets/CODE_ico.png "alt=" on Code View "Width=" "height=" 12 " Style= "border:0px;"/>650) this.width=650; "src=" Https://code.csdn.net/assets/ico_fork.svg "alt=" Derivation to My Code slice " Width= "height=" style= "border:0px;"/>

1. Event.preventdefault ()

The drop event occurs when the dragged data is dropped.

Above, the OnDrop property invokes a function, Drop (event):

[HTML] view plain copy

Print? 650) this.width=650; "src=" Https://code.csdn.net/assets/CODE_ico.png "alt=" on Code View "Width=" "height=" 12 " Style= "border:0px;"/>650) this.width=650; "src=" Https://code.csdn.net/assets/ico_fork.svg "alt=" Derivation to My Code slice " Width= "height=" style= "border:0px;"/>

2. function Drop (EV)

4. {

6. <span style="White-space:pre"> </span>ev.preventdefault ();

8. <span style="White-space:pre"> </span>var data=   Ev.dataTransfer.getData ("Text");

10. <span style="White-space:pre"> </span>ev.target.appendchild (  document.getElementById (data));

12. }

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)

Ii. Description of the case

[HTML] view plain copy

Print? 650) this.width=650; "src=" Https://code.csdn.net/assets/CODE_ico.png "alt=" on Code View "Width=" "height=" 12 " Style= "border:0px;"/>650) this.width=650; "src=" Https://code.csdn.net/assets/ico_fork.svg "alt=" Derivation to My Code slice " Width= "height=" style= "border:0px;"/>

2. <! DOCTYPE HTML>

4. <html>

6. <head>

8. <script type="Text/javascript">

10. Block the default handling of elements

12. function AllowDrop (EV)

14. {

16. Ev.preventdefault ();

18. }

22. Pass the ID of the dragged object to the DataTransfer intermediate object

24. function drag (EV)

26. {

28. Ev.dataTransfer.setData ("Text", ev.target.id);

30. }

34. Get Drag Object ID Find object instance and add Dom model to <div> inside

36. function Drop (EV)

38. {

40. Ev.preventdefault ();

42. var data=ev.dataTransfer.getData ("Text");

44. Ev.target.appendChild (document.getElementById (data));

46. }

48. </Script>

50. </head>

52. <body>

54. <!--the place to be dragged--

56. <div id="Div1" ondrop="Drop (event)"

58. ondragover="AllowDrop (event)"

60. style="border:1px solid red;width:300px;height:200px;" >

62. </div>

64. <!--objects to be dragged--

66. <img id="Drag1" src="test.png" draggable="true"

68. ondragstart="Drag (event)"/>

72. </Body>

74. </html>

650) this.width=650; "src=" Http://img.my.csdn.net/uploads/201401/12/1389505406_5925.gif "style=" border:0px; "/>

HTML5 Mobile Development Road (16)--Magical drag and drop function