Edit Code in left box and click Show Results button to see the result. | Home
<!DOCTYPE HTML> <html> <!-- Mirrored from www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-58.htm by HTTrack Website Copier/3.x [XR&CO'2010], Thu, 01 Sep 2011 09:04:43 GMT --> <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8"><!-- /Added by HTTrack --> <head> <style type="text/css"> #boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; } #boxA { background-color: #6633FF; width:75px; height:75px; } #boxB { background-color: #FF6699; width:150px; height:150px; } </style> <script type="text/javascript"> function dragStart(ev) { ev.dataTransfer.effectAllowed='move'; ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,0,0); return true; } </script> </head> <body> <center> <h2>Drag and drop HTML5 demo</h2> <div>Try to drag the purple box around.</div> <div id="boxA" draggable="true" ondragstart="return dragStart(event)"> <p>Drag Me</p> </div> <div id="boxB">Dustbin</div> </center> </body> <!-- Mirrored from www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-58.htm by HTTrack Website Copier/3.x [XR&CO'2010], Thu, 01 Sep 2011 09:04:43 GMT --> <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8"><!-- /Added by HTTrack --> </html> |