四个函数
1 让元素变成可拖动的数据
2 当元素到达可拖放的区域，阻止原来的设定（链接打开新网页）
3 当在可拖放区域(div)内，释放鼠标键，div获取元素数据，进行放置
4 当完成放置给出提示
<html>
<head>
<title>Html5图片拖放</title>
<style type="text/css">
div
{
float:left;
width:250px;
height:200px;
margin:10px;
padding:10px;
border:1px solid #aaaaaa;
}
p
{
display:none;
}
</style>
</head>
<body>
<div οndragοver="stoplink(event)" οndrοp="getdata(event)">
<img id="a" src="1.jpg" draggable="true" οndragstart="setdata(event)" οndragend="tishi()"/>
</div>
<div οndragοver="stoplink(event)" οndrοp="getdata(event)">
</div>
<p id="p1">您已完成拖动！</p>
<script type="text/javascript">
function setdata(ev){//元素a开始被拖动时，将元素a转化为可拖动的数据
ev.dataTransfer.setData("text",ev.target.id);
}
function stoplink(ev){//当元素到达可拖放区域时，阻止自动打开新的链接
ev.preventDefault();
}
function getdata(ev){//当放开鼠标键时，div获取元素a数据，进行放置
var data=ev.dataTransfer.getData("text");//获取元素a的数据
ev.target.appendChild(document.getElementById(data));//将元素a添加为div子元素
}
function tishi(){//当完成拖动时给出信息提示
document.getElementById("p1").style.display="block";
}
</script>
<!--
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
-->
</body>
</html>
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
