HTML5图片拖放


HTML5图片拖放
 <!DOCTYPE HTML>

<html>
<head>
<style type="text/css">
   #div1{
    width:488px;
    height:250px;
    padding:10px;
    border:1px solid #aaaaaa;}
  #div2{
    width: 488px;
    height: 250px;
    padding: 10px;
    border: 1px solid #ff00aa;
  }
</style>
<script type="text/javascript">
  //允许拖放
  function allowDrop(event){
    event.preventDefault();//默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式
  }

  //拖放
  function drag(event){
    event.dataTransfer.setData("Text",event.target.id);
  }
 
  //放置数据
  function drop(event){
    event.preventDefault();
    var data=event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
 
 
  function drop2(event){
    event.preventDefault();
    var data=event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
</script>
</head>
<body>

<p>HTML5拖放图片</p>

  <!-- ondragover事件规定在何处放置被拖动的数据 -->
  <!-- ondragstart事件规定当元素被拖动时,会发生什么 -->
  <!-- ondrop事件当放置被拖数据时,会发生 drop 事件 -->
  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"/></div>
<br />
  <img id="drag1" src="http://g.hiphotos.baidu.com/baike/s%3D220/sign=7a3eb4ee97dda144de096bb082b5d009/e1fe9925bc315c6042417b128db1cb1348547772.jpg" draggable="true" ondragstart="drag(event)" />
  <div id="div2" ondragover="allowDrop(event)" ondrop="drop2(event)"></div>

</body>
</html>

你可能感兴趣的:(html5)