拖放API中的drag和drop实战

原文地址：→传送门

写在前面

在HTML5以前，实现拖放功能须要借助mousedown/mousemove/mouseover/mouseout/mouseup等鼠标事件来完成，HTML5中拖放API的出现使不少事情变简单。下面是作笔记作笔记~

注：将来得及作兼容，请在chrome中打开。

• 源码地址
• 栗子预览1
• 栗子预览2
• 栗子预览3

拖放过程

1. 拖放：包括拖拽（drag）和释放（drop）

2. 拖放中涉及两个元素，分别是：源对象和目标对象，以下图
   源对象是被拖拽的元素，目标对象是要释放到的接收元素。
   

3. 拖放事件：

拖放事件流为拖放操做开始后触发的一系列事件，分为如下两类：

发生在源对象上的事件

dragstart:用户开始拖动页面中的某个元素时触发的事件
drag: 源对象在拖拽过程当中持续触发的事件
dragend:拖动完成时触发的事件，通常用于清空拖动过程当中的状态等。

发生在目标对象上的事件

dragenter:源对象进入到目标对象时，会触发目标对象的ondragenter事件
dragleave:源对象移除以前调用了dragenter的元素时，目标元素触发的事件
dragover：源对象进入目标对象后持续触发的事件
drop：用户释放鼠标时，drop会在目标对象上被调用

4.设置元素可拖动

dragable = "true"

5.传输和控制--dataTransfer

dataTransfer对象可用于每一个拖放事件中。用于获取和设置实际放置的数据，主要属性及方法以下：

setData(format,data):在dragstart事件中调用此函数能够注册一个MIME类型格式的传输项。
getData(format):能够获取指定类型的注册数据项。
types：属性以数组形式返回全部当前注册的格式。
items：返回全部项机器相关格式列表
files：返回与放置相关的全部文件
clearData():不带参则清空全部注册数据，带参则移除指定注册项
…………等等

来点儿小栗子

说小栗子前说下两点：

• 触发dragover事件时，须要使用preventDefault()方法阻止默认事件，drag事件才能正常触发
• dataTransfer中的files属性用到了File API规范的子集，files存放了文件列表，files支持下列属性：

name:带有扩展名的文件全名
type：文件的MIME类型
size：以字节为单位的文件大小
lastModifiedDate：最后一次修改文件内容的时间戳

• 下面会用到的FileReader对象详细请移步：
  FileReader 对象容许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

  其中File对象能够是来自用户在一个元素上选择文件后返回的FileList对象,也能够来自拖放操做生成的 DataTransfer对象,还能够是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果.

1. 简单的节点拖放
   可将任意节点拖放到其余元素上，并插入到目标元素的前面
   拖放先后：
   

主要代码：

/*目标对象上触发的dragove事件*/
    drag.addEventListener('dragover', function (e) {
        e.preventDefault(); //阻止默认动做
    })
  
    /*源对象释放，目标对象上触发的事件*/
    drag.addEventListener('drop', function (e) {
        ele.classList.remove('draging');
        if (e.target.nodeName === 'LI') {
            e.target.parentNode.insertBefore(ele, e.target); //将源对象元素插入到目标元素前面
        }
    })

2.节点清除
可将龙猫丢进垃圾桶，即清除img元素节点
丢龙猫先后：

主要代码：

<h3>拖动龙猫到垃圾桶后从DOM树中删除子元素</h3>  
      ![](./img/default.png)  
      <hr/>  
      ![](./img/01.jpeg)  
      ![](./img/02.jpg)  
      ![](./img/03.jpeg)  
      
      <script>  
      
        //为源对象添加事件监听 —— 记录拖动了哪个源对象  
        var imgs = document.querySelectorAll('.imgs'); 
        var target = document.querySelector('#bin');

        for(var i=0; i<imgs.length; i++){   
          var pic = imgs[i];  
          pic.ondragstart = function(e){ //开始拖动源对象  
            e.dataTransfer.setData('imgID',this.id);//保存被拖拽源的id 
          }    
        }  
      
        //为目标对象添加事件监听 —— 删除拖动的源对象   
        target.ondragover= function(e){    
          e.preventDefault();  //阻止默认行为  
        }  
        target.ondrop= function(e){ //源对象松手释放在了目标对象中   
          //删除被拖动的源对象  
          var id = e.dataTransfer.getData('imgID');  
          var p = document.getElementById(id);   
          p.parentNode.removeChild(p);  //从父元素中删除子节点  
        }  
      
      </script>

1. 将本地图片拖放到页面中指定区域
   可将你的美图拖到网页中显示
   爆照先后效果：
   
   主要代码：

var content = document.querySelector('#content');

    document.addEventListener('dragover',function(e){
        e.preventDefault(); //阻止document的默认事件
    });

    document.addEventListener('drop',function(e){
        e.preventDefault(); //阻止document的默认事件(阻止照片在新窗口中打开)
    });

    content.addEventListener('dragover',function(e){
        e.preventDefault();
    })

    content.addEventListener('drop',function(e){
        var imgFs = e.dataTransfer.files[0];  //files存放了文件列表
        //console.log(imgFs);
        var fs = new FileReader();  //建立一个FileReader对象
        fs.readAsDataURL(imgFs);
        /*图片资源加载完成以后显示在content中*/
        fs.onload = function(){
            var img = new Image();
            img.src = fs.result;
            content.appendChild(img);
        }
    })

小结

对今天学习的知识点作个记录，欢迎大佬们指正~