HTML5 Drag and drop

1. Two div to drag and drop the picture back and forth, directly on the code:

Style CSS

<style>        #div1, #div2 {            width:400px;            height:300px;            border:1px solid green;        }        #div2 {            border:1px solid red;        } </style>

Dom

<DivID= "Div1"OnDragOver= "OnDragOver (event)"OnDrop= "OnDrop (event)"></Div><BR><DivID= "Div2"OnDragOver= "OnDragOver (event)"OnDrop= "Onbackdrop (event)">    <imgID= "IMG1"src=".. /images/gif.gif "draggable= "true"ondragstart= "Ondragstart (event)"/></Div>

Js

<script>    function  ondragstart (e) {        e.datatransfer.setdata ("text", e.target.id )    }    function  ondragover (e) {        e.preventdefault ();    }     function OnDrop (e) {        e.preventdefault ();        E.target.appendchild (document.getElementById (E.datatransfer.getdata ("text")));     function Onbackdrop (e) {        e.preventdefault ();        E.target.appendchild (document.getElementById (E.datatransfer.getdata ("text")));     </script>

2. Note the following:

A. The function name cannot be the same as the event name, otherwise the error will be dropped when dragging:

B. OnDragOver event name in the DOM with the entry event can not be changed to E, or drag will also error,

Onbackdrop events can be changed into OnDrop,

The above tests are only tested on the Google 41 release.

HTML5 Drag and drop