重温---HTML5高级---拖放API

  Drag：拖动

      Drop：释放

  在HTML5之前只能使用鼠标事件模拟出“拖放”效果；HTML5专门为拖放提供了7个事件句柄。

       

  (1)拖动的源对象(source)可以触发的事件：

       dragstart：拖动开始

       drag：拖动进行中

       dragend：拖动结束

       源对象的拖动过程：dragstart x 1 + drag x n + dragend x 1

       练习：实现一个可以随着鼠标拖动而移动的小飞机

  (2)拖动的目标对象(target)可以触发的事件：

       dragenter：拖动着进入

       dragover：拖动着在目标对象上方

       dragleave：拖动着离开

       drop：松手/释放/松开

       目标对象的进入/离开过程：

              dragenter x 1 + dragover x n + dragleave x 1

       目标对象的进入/释放过程：

              dragenter x 1 + dragover x n + drop x 1

  注意：必须阻止dragover的默认行为！否则drop事件无法触发！

练习：

(1)垃圾桶初始时半透明；拖动小飞机进入垃圾桶变为不透明，离开后重新半透明，在垃圾桶上方松手也变为半透明。

提示：需要用到目标对象的四个事件

  
  
  


  
拖放API---拖放事件的目标对象
  
  

  
  

(2)一个垃圾桶，下方有一个容器(div#container)，其中有三个小飞机，拖动某个小飞机到垃圾桶上方，则容器中删除此小飞机 

提示：需要用到源对象和目标对象的多个事件

  
  
  


  
拖放API---拖放删除效果
  
  

  

    
    
    
  
  

如何在拖动的源对象和目标对象间传递数据

  如何在7个事件间传递数据？

  源对象事件——3个：

  目标对象事件——4个：

  (1)方法一：使用全局变量 —— 全局对象污染

  (2)方法二：使用拖放事件对象的dataTransfer属性

  说明：dataTransfer，用作数据传递/转移，看作“拖拉机”

  源对象触发事件时保存k-v数据：

       src.onxxx = function(e){

              e.dataTransfer.setData( 'key',  'value' );

       }

  目标对象触发事件时获取k-v数据：

       target.onxxx = function(e){

              var value = e.dataTransfer.getData( 'key' )

       }

上述练习(2)代码优化:

  
  
  


  
拖放API---拖放删除效果
  
  

  

    
    
    
  
  

课后练习： 英雄选择

要求：

       拖动某架飞机到目标区域，则在上方显示出该飞机；下方该飞机图消失；替换选中区域已有的飞机。

       拖动另一架飞机到目标区域，则显示出该飞机，之前选中的飞机变为重新回到待选区域。

  
  
  


  
作业---英雄选择
  

    
  
  

  

    
    
    
  
  

拓展:如何在服务器端下载的网页中显示客户端图片？

  一般情况下，网页只能显示服务器上的图片；

  HTML5中，可以实现用户拖拽一张本地的图片显示在服务器端下载的网页中。

  container.ondrop = function(e){

      var f0 = e.dataTransfer.files[0];

       var reader = new FileReader();

       reader.readAsDataURL(f0);

       reader.onload = function(){

              ///读取完成，数据在reader.result中

       }

  }

HTML5中提供的用于文件输入输出(I/O)的对象：

File：代表一个文件/目录对象

FileList：代表一个文件列表（类数组对象）

FileReader：用于从文件中读取内容

FileWriter：用于向向文件写出内容

  
  
  


  
请拖拽您选择的头像到下方区域中