dragend-event-manual.html (2417B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>HTML5 Drag and Drop: Fire dragend 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 dragend event during the drag and drop processing"/> 9 <script type="text/javascript"> 10 var EVENT, TARGET; 11 12 function DragendEvent(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 = "dragend"; 25 26 window.onload = function() 27 { 28 TARGET = document.getElementById("target"); 29 TARGET.addEventListener(EVENT, DragendEvent, false); 30 } 31 </script> 32 </head> 33 <body> 34 <pre>Description: Fire dragend 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> Drag the blue image 47 <li> Drop it on the green box 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 drag operation failed or succeeded, fire a DND event named dragend at the source node. 58 </p> 59 <img src="/images/blue.png" style="width:200px; height:100px" draggable="true" id="target"/> 60 <br /><br /> 61 <input type="text" style="border:2px green solid; width:200px; height:50px"></input> 62 </body> 63 </html>