| <!doctype html> |
| <html> |
| <head> |
| <title>HTML5 Drag and Drop: Add an item to the drag data store item list whose data is the string given by setData method's second argument</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="Add an item to the drag data store item list whose data is the string given by setData method's second argument"/> |
| <script src="../resources/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.setData("text", "SetText"); |
| } |
| } |
| function DropEvent(evt) |
| { |
| if ((TARGET2 == evt.target) && (TARGETEVENT2 == evt.type)) |
| { |
| if("SetText" == evt.dataTransfer.getData("text")) |
| { |
| LogTestResult("PASS"); |
| } |
| else |
| { |
| LogTestResult("FAIL"); |
| } |
| } |
| } |
| |
| TARGETEVENT1 = "dragstart"; |
| TARGETEVENT2 = "drop"; |
| |
| window.onload = function() |
| { |
| TARGET1 = document.getElementById("target1"); |
| TARGET2 = document.getElementById("target2"); |
| AddEventListenersForElement(TARGETEVENT1, DragstartEvent, false, TARGET1); |
| AddEventListenersForElement(TARGETEVENT2, DropEvent, false, TARGET2); |
| } |
| </script> |
| </head> |
| <body> |
| <pre>Description: Add an item to the drag data store item list whose data is the string given by setData method's second argument</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 drop it in the green box |
| </ol> |
| </div> |
| </td> |
| </tr> |
| </table> |
| <p> |
| http://dev.w3.org/html5/spec/dnd.html#datatransfer |
| </p> |
| <p> |
| If format equals "text", change it to "text/plain". |
| Remove the item in the drag data store item list whose kind is Plain Unicode string and whose type string is equal to format, if there is one. |
| Add an item to the drag data store item list whose kind is Plain Unicode string, whose type string is equal to format, and whose data is the string given by the method's second argument. |
| </p> |
| <img src="/images/blue.png" style="width:200px; height:100px" draggable="customValue2" id="target1"/> |
| <br /><br /> |
| <input type="text" id="target2" style="border:2px green solid; width:200px; height:50px"></input> |
| </body> |
| </html> |
