html5中实现元素的拖动—-实现图片的拖放

呵呵,不用解释了!~ 直接来代码,在http://www.cangzhang.com/302.html 这个的基础上实现的改进

输入代码:

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

<!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”,”<img src=’”+source.src+”‘ style=’border:1px solid red;margin:10px 20px;’/>”);
},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;
dest.innerHTML+=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>
<h1>实现图片的拖动</h1>
<img id=”dragme” draggable=”true” src=”http://gagaj2ee.sinaapp.com/wp-content/themes/weisaysimple/images/random/tb11.jpg” style=”border:1px solid green;”/>
<br/>
<div id=”text” style=”width:800px;height:300px;border:1px solid red;”></div>
<h2>记住我们哦!~ <a href=”http://www.yugaga.com”><font color=”#ff5500″>娱嘎嘎</font><a>·~~~~~~~~三稳</h2>
<center>
</body>
</html>

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

效果截图:

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

 

共有 0 条评论

Top