dragstart-event-manual.html (2359B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>HTML5 Drag and Drop: Fire dragstart 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 dragstart event during the drag and drop processing"/> 9 <script type="text/javascript"> 10 var EVENT, TARGET; 11 12 function DragstartEvent(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 = "dragstart"; 25 26 window.onload = function() 27 { 28 TARGET = document.getElementById("target"); 29 TARGET.addEventListener(EVENT, DragstartEvent, false); 30 } 31 </script> 32 </head> 33 <body> 34 <pre>Description: Fire dragstart 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> Click and drag the red box 47 </ol> 48 </div> 49 </td> 50 </tr> 51 </table> 52 <p> 53 http://dev.w3.org/html5/spec/dnd.html#drag-and-drop-processing-model 54 </p> 55 <p> 56 If it is an element that is being dragged, then set the drag data store elements list to contain just the source node. 57 Fire a DND event named dragstart at the source node. 58 </p> 59 <div id="target" style="border:2px red solid; width:200px; height:50px" draggable="true"></div> 60 </body> 61 </html>