html5中实现元素的拖动!~

1.首先需要把你想要拖动的元素,定义为可以拖动的<div id=”dragme” draggable=”true” style=”width:200px;border:1px solid gray;”>

2.打开默认禁止拖动行为。 document.ondragover=function(e){e.preventDefault();};
document.ondrop=function(e){e.preventDefault();};

3.其实只需要这两步,元素已经可以拖动,只是不知道是拖到哪儿去,拖动之后干嘛,只需要在相应的事件里面添加合适的代码就可以了,拖动中最重要的就是实现数据传输,这是拖动最大的作用。

输入代码:

———————————————————————————————-

<!DOCTYPE HTML>
<html>
<head>
<title>使用html5实现拖动</title>
<meta charset=”UTF-8″>
<script type=”text/javascript”>
function init(){
var source=$(“dragme”);
var dest=$(“text”);
//拖放的开始
source.addEventListener(“dragstart”,function(ev){
var dt=ev.dataTransfer;
dt.effectAllowed=’all’;
dt.setData(“text/html”,”我是三稳”);
},false);
//拖放 结束
dest.addEventListener(“dragend”,function(ev){
ev.preventDefault();
},false);
//被拖放
dest.addEventListener(“drop”,function(ev){
//从dataTransfer那儿获得数据
var dt=ev.dataTransfer;
var text=dt.getData(“text/html”);
dest.textContent+=text;
ev.preventDefault();
ev.stopPropagation();
},false);
}

document.ondragover=function(e){e.preventDefault();};
document.ondrop=function(e){e.preventDefault();};

function $(id){
return document.getElementById(id);
}
</script>
</head>

<body onload=”init();”>
<center>
<div id=”dragme” draggable=”true” style=”width:200px;border:1px solid gray;”>
请拖放
</div>
<br/>
<div id=”text” style=”width:200px;height:200px;border:1px solid red;”></div>
<center>
</body>
</html>

—————————————————————————————————————

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/tuodong.htm

Top