| <!doctype html> |
| <html> |
| <head> |
| <title>HTML5 Drag and Drop: Set a value to effectAllowed attribute</title> |
| <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> |
| <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> |
| <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/> |
| <meta name="assert" content="Set a value to effectAllowed attribute"/> |
| <script src="dragdrop_support.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| var TARGETEVENT1, TARGETEVENT2, TARGET1, TARGET2; |
| |
| function DragstartEvent(evt) |
| { |
| if ((TARGET1 == evt.target) && (TARGETEVENT1 == evt.type)) |
| { |
| evt.dataTransfer.effectAllowed = "move"; |
| } |
| } |
| function DragenterEvent(evt) |
| { |
| if ((TARGET2 == evt.target) && (TARGETEVENT2 == evt.type)) |
| { |
| if("move" == evt.dataTransfer.effectAllowed) |
| { |
| LogTestResult("PASS"); |
| } |
| else |
| { |
| LogTestResult("FAIL"); |
| } |
| } |
| } |
| |
| TARGETEVENT1 = "dragstart"; |
| TARGETEVENT2 = "dragenter"; |
| |
| window.onload = function() |
| { |
| TARGET1 = document.getElementById("target1"); |
| TARGET2 = document.getElementById("target2"); |
| AddEventListenersForElement(TARGETEVENT1, DragstartEvent, false, TARGET1); |
| AddEventListenersForElement(TARGETEVENT2, DragenterEvent, false, TARGET2); |
| } |
| </script> |
| </head> |
| <body> |
| <pre>Description: Set a value to effectAllowed attribute</pre> |
| <table id='testtable' border='1'> |
| <tr> |
| <td>Test Result</td> |
| <td>Test Assertion</td> |
| </tr> |
| <tr> |
| <td id='test_result'>Manual</td> |
| <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. |
| <div id="manualsteps"> |
| Steps: |
| <ol> |
| <li> Drag the blue image and enter the green box |
| </ol> |
| </div> |
| </td> |
| </tr> |
| </table> |
| <p> |
| http://dev.w3.org/html5/spec/dnd.html#datatransfer |
| </p> |
| <p> |
| 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. |
| </p> |
| <img src="../images/blue.png" style="width:200px; height:100px" draggable="true" id="target1"/> |
| <br /><br /> |
| <input type="text" id="target2" style="border:2px green solid; width:200px; height:50px"></input> |
| </body> |
| </html> |