html5学习笔记——如何实现拖拽上传

 

如何实现拖拽？

1、为要实现拖拽的元素添加属性 draggable="ture"

<div class="dragBox" draggable="ture"></div>

2、js拖拽相关事件

被拖拽元素事件：

• ondragstart 拖拽开始的时触发 (触发一次)
• ondrag 连续触发拖拽事件
• ondragend 拖拽结束触发 (触发一次)

拖拽进入的目标元素的事件：

• ondragenter 鼠标进入目标元素内触发 (触发一次)
• ondragover 鼠标在目标元素内持续触发
• ondragleave 鼠标离开目标元素时触发事件 (触发一次)
• ondrop 鼠标在目标元素上抬起时触发 (触发一次)

//被拖拽元素-拖拽开始时的触发
const dragBox = document.querySelector('.dragBox');
dragBox.ondragStart = function(){
    this.innerHTML ='1'
}

//目标元素-鼠标进入时触发
innerBox.addEventListener('dragenter',function(){
     this.innerHTML = '别进来'           
});

在进行尝试的过程中，ondrop事件出现了失灵的状况，最后发现是因为有默认事件，需对默认事件进行阻止：

//拖拽覆盖时
innerBox.addEventListerner('dragover',function(e){
   e.preventDefault();
   e.stopPropagation(); 
　　return false;     
});
//拖拽鼠标释放时
innerBox.addEventListerner('drop',function(e){
   e.preventDefault();
   e.stopPropagation();  
　  return false;  

});

3、火狐浏览器的兼容问题

在火狐浏览器无法进行拖拽操作，需采取一些措施达到兼容的效果：为正在拖动的元素设置数据，使目标元素可以获取到

//只需在拖拽开始的事件里加入如下代码，即可达到兼容效果
dragBox.ondragStart = function(e){
    e.dataTransfer.setData('goudan','goudan');
}

goudan 只是个名字，可以任取

如果想在拖拽结束时取出数据：

innerBox.addEventListener('drop', function(e){
    e.dataTransfer.getData('goudan');
})

4、file读取图片显示 fileReader

如果想要实现拖拽图片到网页中的功能，如图片上传功能

dragBox.ondrop = function(e){
    //file对象
    const file = e.dataTransfer.files.item(0);
    //创建文件读取对象    
    const f = new FileReader(file);
    //读取图片 格式base64
     f.readAsDataURL(file);
     f.onload = function(){
         const img = new Image();
         img.src = this.result;
         document.body.appendChild(img)
     };
}        

 4、blob读取显示图片

blob将拖进来的图片转换为2进制原始数据

dragBox.ondrop = function(e){
    //file对象
    const file = e.dataTransfer.files.item(0);
    //创建文件读取对象    
    const f = new Blob(file);
    //创建文件链接
    const url = window.URL.createObjectURL(blob);
    const img = new Image();
    img.src = url;
    img.onload = function(){
       document.body.appendChild(img);
    }     
}    

 关于Blob对象：https://www.cnblogs.com/wangfajing/p/7202139.html?utm_source=itdadao&utm_medium=referral