effectAllowed-manual.html (3035B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>HTML5 Drag and Drop: Set a value to effectAllowed attribute</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#datatransfer"/> 8 <meta name="assert" content="Set a value to effectAllowed attribute"/> 9 <script type="text/javascript"> 10 var TARGETEVENT1, TARGETEVENT2, TARGET1, TARGET2; 11 12 function DragstartEvent(evt) 13 { 14 if ((TARGET1 == evt.target) && (TARGETEVENT1 == evt.type)) 15 { 16 evt.dataTransfer.effectAllowed = "move"; 17 } 18 } 19 function DragenterEvent(evt) 20 { 21 if ((TARGET2 == evt.target) && (TARGETEVENT2 == evt.type)) 22 { 23 if("move" == evt.dataTransfer.effectAllowed) 24 { 25 document.getElementById("test_result").firstChild.data = "PASS"; 26 } 27 else 28 { 29 document.getElementById("test_result").firstChild.data = "FAIL"; 30 } 31 } 32 } 33 34 TARGETEVENT1 = "dragstart"; 35 TARGETEVENT2 = "dragenter"; 36 37 window.onload = function() 38 { 39 TARGET1 = document.getElementById("target1"); 40 TARGET2 = document.getElementById("target2"); 41 TARGET1.addEventListener(TARGETEVENT1, DragstartEvent, false); 42 TARGET2.addEventListener(TARGETEVENT2, DragenterEvent, false); 43 } 44 </script> 45 </head> 46 <body> 47 <pre>Description: Set a value to effectAllowed attribute</pre> 48 <table id='testtable' border='1'> 49 <tr> 50 <td>Test Result</td> 51 <td>Test Assertion</td> 52 </tr> 53 <tr> 54 <td id='test_result'>Manual</td> 55 <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. 56 <div id="manualsteps"> 57 Steps: 58 <ol> 59 <li> Drag the blue image and enter the green box 60 </ol> 61 </div> 62 </td> 63 </tr> 64 </table> 65 <p> 66 http://dev.w3.org/html5/spec/dnd.html#datatransfer 67 </p> 68 <p> 69 On setting, if the new value is one of "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", or "uninitialized", then the attribute's current value must be set to the new value. 70 </p> 71 <img src="/images/blue.png" style="width:200px; height:100px" draggable="true" id="target1"/> 72 <br /><br /> 73 <input type="text" id="target2" style="border:2px green solid; width:200px; height:50px"></input> 74 </body> 75 </html>