dragover-event-manual.html (2465B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>HTML5 Drag and Drop: Fire dragover event during the drag and drop processing</title> 5 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> 6 <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> 7 <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model"/> 8 <meta name="assert" content="Fire dragover event during the drag and drop processing"/> 9 <script type="text/javascript"> 10 var EVENT, TARGET; 11 12 function DragoverEvent(evt) 13 { 14 if ((TARGET == evt.target) && (EVENT == evt.type)) 15 { 16 document.getElementById("test_result").firstChild.data = "PASS"; 17 } 18 else 19 { 20 document.getElementById("test_result").firstChild.data = "FAIL"; 21 } 22 } 23 24 EVENT = "dragover"; 25 26 window.onload = function() 27 { 28 TARGET = document.getElementById("target"); 29 TARGET.addEventListener(EVENT, DragoverEvent, false); 30 } 31 </script> 32 </head> 33 <body> 34 <pre>Description: Fire dragover event during the drag and drop processing</pre> 35 <table id='testtable' border='1'> 36 <tr> 37 <td>Test Result</td> 38 <td>Test Assertion</td> 39 </tr> 40 <tr> 41 <td id='test_result'>Manual</td> 42 <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. 43 <div id="manualsteps"> 44 Steps: 45 <ol> 46 <li> Select the text inside the red box. 47 <li> Drag it, hover over the green box and then release the mouse 48 </ol> 49 </div> 50 </td> 51 </tr> 52 </table> 53 <p> 54 http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model 55 </p> 56 <p> 57 If the current target element is a DOM element, then fire a DND event named dragover at this current target element 58 </p> 59 <div style="border:2px red solid; width:100px">SampleText</div> 60 <br /><br /> 61 <div id="target" style="border:2px green solid; width:200px; height:100px"></div> 62 </body> 63 </html>