图片拖拽复制

  <!DOCTYPE html>
  <html>
  <head>
  <title>HTML5中的拖放效果</title>
  <meta charset="utf-8" />
  <style>
  #d1 {
  width : 300px;
  height : 300px;
  border : solid 1px black;
  float : left;
  }
  #d2 {
  width : 300px;
  height : 600px;
  border : solid 1px black;
  float : right;
  }
  </style>
  </head>
   
  <body>
  <!-- 源元素 -->
  <div id="d1">
  <img id="myimg" src="Penguins.jpg" width="256" />
  </div>
  <!-- 目标元素 -->
  <div id="d2"></div>
  <script>
  /*
  * 使用HTML5中的拖放API实现拖放功能
  * * 源元素事件 - dragstart事件
  * * 目标元素事件 - drop和dragover事件
  * * dataTransfer对象
  */
  // 1. 获取源元素
  var myimg = document.getElementById("myimg");
  // 2. 获取目标元素
  var ele = document.getElementById("d2");
  // 3. 为源元素绑定dragstart事件
  myimg.addEventListener("dragstart",MyDragStart);
  // 4. 为目标元素绑定dragover和drop事件
  ele.addEventListener("dragover",MyDragOver);
  ele.addEventListener("drop",MyDrop);
  // 5. 实现事件的处理函数
  function MyDragStart(event){
  // 将源元素的数据,存储在dataTransfer对象中
  // 1. 获取源元素数据
  var mydata = myimg.src;
  // 2. 获取dataTransfer对象
  var trans = event.dataTransfer;
  /*
  * 3. 调用setData(type,data)方法
  * * type - 类型,特指标识(id)
  * * 类型一般为string
  * * data - 设置的数据内容
  */
  trans.setData("text",mydata);
  }
  function MyDragOver(event){
  event.preventDefault();
  }
  function MyDrop(event){
  // 从dataTransfer对象中,获取之前设置的数据
  // 1. 获取dataTransfer对象
  var trans = event.dataTransfer;
  /*
  * 2. 从dataTransfer对象中,获取设置的数据
  * getData(type)方法
  * * type - 之前调用setData()时,传递的是什么值,这里传递什么值
  */
  var mysrc = trans.getData("text");
  // 3. 将源元素(图片),添加到目标元素中
  ele.innerHTML = "<img src='"+mysrc+"' width='256'/>";
  // 4. 清除dataTransfer对象中的数据
  trans.clearData("text");
  }
  /*
  * 事件对象 - 作为事件处理函数的参数存在
  * * DOM底层代码的默认写法就是event
  * * 如果使用event事件对象时,标准写法
  * * 允许不在事件的处理函数中定义参数
  * * 注意 - 这种写法不是标准写法(不建议)
  */
  </script>
  </body>
  </html>
posted @ 2017-11-17 20:28  qqq齐  阅读(123)  评论(0)    收藏  举报