| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>HTML5 Draggable</title> |
| <style> |
| |
| [draggable="true"] { |
| outline: 1px solid lime; |
| } |
| |
| [draggable="false"] { |
| outline: 1px solid pink; |
| } |
| |
| </style> |
| <script> |
| |
| function test() |
| { |
| var elements = document.querySelectorAll('body > :not(h2)'); |
| |
| for (var i = 16; i < 24; i++) { |
| elements[i].draggable = i < 20; |
| } |
| |
| var s = 'dom - attr\n----------\n'; |
| for (var i = 0; i < elements.length; i++) { |
| s += elements[i].draggable + ' - ' + elements[i].getAttribute('draggable') + '\n'; |
| } |
| |
| var pre = document.createElement('pre'); |
| pre.textContent = s; |
| document.body.appendChild(pre); |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| }; |
| |
| document.ondragstart = function(e) |
| { |
| e.dataTransfer.setData('Text', e.target.textContent || e.target.src || e.target.href); |
| }; |
| |
| </script> |
| </head> |
| <body onload="test()"> |
| |
| <h2>Intrinsic</h2> |
| |
| <img src="resources/images/lime.png"> |
| <a href="http://webgkit.org">webkit.org</a> |
| <a><a no href></a> |
| <span><span></span> |
| |
| <h2>draggable attr set to true</h2> |
| |
| <img src="resources/images/lime.png" draggable="true"> |
| <a href="http://webgkit.org" draggable="true">webkit.org</a> |
| <a draggable="true"><a no href></a> |
| <span draggable="true"><span></span> |
| |
| <h2>draggable attr set to false</h2> |
| |
| <img src="resources/images/lime.png" draggable="false"> |
| <a href="http://webgkit.org" draggable="false">webkit.org</a> |
| <a draggable="false"><a no href></a> |
| <span draggable="false"><span></span> |
| |
| <h2>draggable attr set to maybe</h2> |
| |
| <img src="resources/images/lime.png" draggable="maybe"> |
| <a href="http://webgkit.org" draggable="maybe">webkit.org</a> |
| <a draggable="maybe"><a no href></a> |
| <span draggable="maybe"><span></span> |
| |
| <h2>draggable dom prop set to true</h2> |
| |
| <img src="resources/images/lime.png"> |
| <a href="http://webgkit.org">webkit.org</a> |
| <a><a no href></a> |
| <span><span></span> |
| |
| <h2>draggable dom prop set to false</h2> |
| |
| <img src="resources/images/lime.png"> |
| <a href="http://webgkit.org">webkit.org</a> |
| <a><a no href></a> |
| <span><span></span> |
| |
| </body> |
| </html> |
