serenata: [HTML5] A sample for drag and drop.

2011年12月28日星期三

[HTML5] A sample for drag and drop.

<html>
<body>
<form>
<ul id="list1" ondragstart="onDragStart(event)"
ondragenter="onDragEnter(event)"
ondragover="onDragOver(event)"
ondrop="onDrop(event)">
<li id="apple1" draggable="true">CCCCC</li>
<li id="orange1" draggable="true">OOOOO</li>
<li id="grape1" draggable="true">ooooo</li>
</ul>
<ul id="list2" ondragstart="onDragStart(event)"
ondragenter="onDragEnter(event)"
ondragover="onDragOver(event)"
ondrop="onDrop(event)">
<li id="apple2" draggable="true">APPLE</li>
<li id="orange2" draggable="true">ORANGE</li>
<li id="grape2" draggable="true">GRAPE</li>
</ul>
</form>

<script type="text/javascript">
function onDragStart(event)
{
if (event.target.tagName.toLowerCase() == "li")
{
event.dataTransfer.setData('Text', event.target.id);
}
else
{
event.preventDefault();
}
}

function onDrop(event)
{
var iid = event.dataTransfer.getData('Text');
var li = document.getElementById(iid);

if (li && li.parentNode != event.currentTarget)
{
li.parentNode.removeChild(li);
event.currentTarget.appendChild(li);
}
event.stopPropagation();
}

function onDragOver(event)
{
event.preventDefault();
}

function onDragEnter(event)
{
var types = event.dataTransfer.types;
for (var i=0; i<types.length; i++)
{
if (types[i] == 'Text')
{
event.preventDefault();
return;
}
}
}
</script>
</body>
</html>