元素的拖拽放置
HTML5允许对页面元素进行拖动，只要在元素的属性中加上draggable="true"，就可以拖动了。
在拖动的同时，必须记录被拖动的元素，通过在元素上注册事件ondragstart即可实现，比如规定了一个img元素可以拖动，代码如下:
<img draggble="true" ondragstart="drag(event);">
function drag(event)
{
event.dataTransfer.setData("Text",ev.target.id);
}
在拖动img的时候，drag函数就会把img的id属性记录在事件中，记录值的类型是Text。
下一步是规定哪些元素可以放置被拖动的img，比如一个div可以放置这个被拖动的img, 需要在这个div上定义一个事件:ondragover,在这个事件中，需要阻止对事件的默认处理方式，其实就是硬性的加上一句:event.preventDefault()
<div ondragover="allowDrop(event);">
function allowDrop(event)
{
event.preventDefault();
}
下一步就是要在容纳这个img的div中把这个img放到里面，当放置的时候，会触发ondrop事件通过event.dataTransfer.getData("Text")来得到上面event.dataTransfer.setData("Text",ev.target.id)的img的id,通过event.target.appendChild(document.getElementById(data))来把img放到div中，注意这里event.target指的是div，不是上面的img了。至此，页面的拖动完成了。下面贴出在w3school中的实例代码:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
浙公网安备 33010602011771号