拖放API中的drag和drop实战

拖放API中的drag和drop实战_第1张图片

原文地址:→传送门

写在前面

在HTML5之前,实现拖放功能需要借助mousedown/mousemove/mouseover/mouseout/mouseup等鼠标事件来完成,HTML5中拖放API的出现使很多事情变简单。下面是做笔记做笔记~

注:未来得及做兼容,请在chrome中打开。

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

拖放过程

  1. 拖放:包括拖拽(drag)和释放(drop)

  2. 拖放中涉及两个元素,分别是:源对象和目标对象,如下图
    源对象是被拖拽的元素,目标对象是要释放到的接收元素。
    拖放API中的drag和drop实战_第2张图片

  3. 拖放事件:

拖放API中的drag和drop实战_第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. 简单的节点拖放
      可将任意节点拖放到其他元素上,并插入到目标元素的前面
      拖放前后:
      拖放API中的drag和drop实战_第4张图片

主要代码:

 /*目标对象上触发的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元素节点
丢龙猫前后:
拖放API中的drag和drop实战_第5张图片

主要代码:

<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; ivar 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. 将本地图片拖放到页面中指定区域
    可将你的美图拖到网页中显示
    爆照前后效果:
    拖放API中的drag和drop实战_第6张图片
    主要代码:
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);
        }
    })

小结

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

你可能感兴趣的:(Web)