HTML5 drag and drop exercises

HTML5 new drag-and-drop supports only Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.

To an example:

<! DOCTYPE html>"Text/css">table td{width:120px;            height:50px; border:1px Solid # the;            } table TD div.dragdiv{Margin:3px; border:1px Solid #444;            padding:3px;        Cursor:pointer; }    </style> class="Dragdiv"> I was going to drag </div> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr><tr> <td> <divclass="Dragdiv"> I am a second </div> </td> <td></td> <td></td> <td></td> <td& gt;</td></tr> </table> <p> Please drag and drop the W3school picture into the rectangle:</p> <div id="Div1"ondrop="Drop (Event)"Ondragover="AllowDrop (Event)"></div> <br/> "Drag1"Src="Images/bigswim7.png"draggable="true"ondragstart="Drag (Event)"/> <script src="Js/jquery-1.12.0.min.js"></script> <script type="Text/javascript">//Drag the div in the table        varTempData =""; $("table TD Div.dragdiv"). each (function () { This. draggable =true;  This. ondragstart =function (e) {if( This==e.target) {e.datatransfer.setdata ("ID", e.target.innerhtml); TempData= This;        }            }        }); $("Table TD"). each (function () { This. OnDragOver =function (e) {e.preventdefault (); }             This. OnDrop =function (e) {if( This==e.target) {e.preventdefault ();                    E.target.appendchild (TempData); TempData=""; }            }        })        //Picture Draggingfunction AllowDrop (EV) {ev.preventdefault (); } function drag (EV) {Ev.dataTransfer.setData ("Text", ev.target.id);            } function Drop (EV) {ev.preventdefault (); vardata = Ev.dataTransfer.getData ("Text");        Ev.target.appendChild (document.getElementById (data)); }    </script></body>
HTML5 drag and drop exercises