html5 拖放

实现图片的拖放

<!DOCTYPE html>
<html>
<head>
<title>拖放</title>
<style>
.div1{
width:300px;
height:300px;
background-color:blue;
}
.div2{
width:300px;
height:300px;
background-color:yellow;
}
</style>
<script type="text/javascript">

  function setdragData(e){
  e.dataTransfer.setData("Text",e.target.id);//这个事件是加在被拖放的物体上的，通过dataTransfer.setData设置被拖放物体的数据：'text'表示的就是物体的标识，
  }
  
  function AllowDrag(e){
  e.preventDefault();//这个事件是加载到要拖放到什么地方的对象上的。这个对象原来是禁止有物体拖放到上面的，所以我们要先去除他的禁止默认属性。
  }
  
  function dragEnd(e){
    e.preventDefault();
    var data=e.dataTransfer.getData("Text");//这个事件也是加载到拖放到什么地方的对象上的。我们通过getData函数获取到被拖放物体的id
    e.target.appendChild(document.getElementById(data));//这一步是将被拖放物体添加到要拖放的位置。
  }
  

</script>
</head>
<body>
<div id="div1" class="div1" ondragover="AllowDrag(event)" ondrop="dragEnd(event)"></div>
<div id="div2" class="div2" ondragover="AllowDrag(event)" ondrop="dragEnd(event)"></div>
<img src="1.png" id="img1" ondragstart="setdragData(event)"/>
</body>
</html>

整个顺序是先设置被拖放物体的数据(ondragstart),接着是禁止默认属性(ondragover),最后是拖放结束(ondrop).

 

posted @ 2016-04-21 15:03  秋天的故事  阅读(157)  评论(0)  编辑  收藏  举报