html 5 鼠标的拖动图片
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>