<!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>