HTML5新功能_拖拽API

一、拖拽API

设置对象可以拖动

<img draggable="true" />

事件

dragover有一个默认行为！！！那就是当dragover触发时，drop会失效！！！！

    source.addEventListener('dragstart',function(ev){   
        console.log('源对象开始被拖动');
    },false)
   source.addEventListener('drag',function(ev){   
        console.log('源对象被拖动过程中(鼠标可能在移动也可能未移动)');
    },false)
   source.addEventListener('dragend',function(ev){   
        console.log('源对象被拖动结束');
    },false)

    process.addEventListener('dragenter',function(ev){  
        console.log('目标对象被源对象拖动着进入');
    },false)
    process.addEventListener('dragleave',function(ev){ 
        console.log('源对象拖动着离开了目标对象');
    },false)
   process.addEventListener('dragover',function(ev){  
        console.log('目标对象被源对象拖动着悬停在上方');
    },false)

    target.addEventListener('drop',function(ev){        // drop事件由c元素产生
        console.log('源对象拖动着在目标对象上方释放/松手');
        ev.preventDefault();
    },false)
    document.ondragover = function(e){e.preventDefault();}

dataTransfer 对象

• 在所有拖放事件中提供了一个数据传递对象 dataTransfer，用于在源对象和目标对象间传递数据。

setData()
该方法向 dataTransfer 对象中存入数据。接收两个参数，第一个表示要存入数据种类的字符串，现在支持有以下几种：

text/plain：文本文字。
text/html：HTML文字。
text/xml：XML文字。
text/uri-list：URL列表，每个URL为一行。
第二个参数为要存入的数据。例如：

event.dataTransfer.setData('text/plain','Hello World');

getData()
该方法从 dataTransfer 对象中读取数据。参数为在 setData 中指定的数据种类。例如：

event.dataTransfer.getData('text/plain');

clearData()
该方法清除 dataTransfer 对象中存放的数据。参数可选，为数据种类。若参数为空，则清空所有种类的数据。例如：

event.dataTransfer.clearData();

setDragImage()
该方法通过用img元素来设置拖放图标。接收三个参数，第一个为图标元素，第二个为图标元素离鼠标指针的X轴位移量，第三个为图标元素离鼠标指针的Y轴位移量。例如：

var source = document.getElementById('source'),
    icon = document.createElement('img');

icon.src = 'img.png';

source.addEventListener('dragstart',function(ev){
    ev.dataTransfer.setDragImage(icon,-10,-10)
},false)

属性	描述
dropEffect	表示拖放操作的视觉效果，允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果范围内，允许指定的值有：none、copy、link、move。
effectAllowed	用来指定当元素被拖放时所允许的视觉效果。可以指定的值有：none、copy、copyLink、copyMove、link、linkMove、all、uninitialize。
files	返回表示被拖拽文件的 FileList。
types	存入数据的MIME类型。如果任意文件被拖拽，那么其中一个类型将会是字符串”Files”。

图片拖拽到网页中并读取

container.ondrop = function(e){
      console.log('客户端拖动着一张图片释放了...')
      //当前的目标对象读取拖放源对象存储的数据
      //console.log(e.dataTransfer); //显示有问题
      //console.log(e.dataTransfer.files.length); //拖进来的图片的数量
      var f0 = e.dataTransfer.files[0];
      //console.log(f0); //文件对象 File
 
      //从文件对象中读取数据
      var fr = new FileReader();
      //fr.readAsText(f0); //从文件中读取文本字符串
      fr.readAsDataURL(f0); //从文件中读取URL数据
      fr.onload = function(){
        console.log('读取文件完成')
        console.log(fr.result);
        var img = new Image();
        img.src = fr.result; //URL数据
        container.appendChild(img);
      }
    }