HTML5 中的拖放功能

魔王哪吒

关注

发布于: 2021 年 01 月 28 日

大家好，我是魔王哪吒，很高兴认识你~~

哪吒人生信条：如果你所学的东西处于喜欢才会有强大的动力支撑。

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗像四处流荡的心定下来，一直走下去，加油，2021加油！欢迎关注，欢迎点赞、收藏和评论

不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。

前言

如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，接收好挑战了吗？文章公众号首发，关注 程序员哆啦 A 梦 第一时间获取最新的文章

笔芯❤️~

知识点

拖拽的体验，你享受过吗，在HTML5之前，可以使用事件mousedown，mousemove，mouseup巧妙实现页面的拖放操作，但注意拖放的操作范围只是局限在浏览器内部。

而HTML5的拖放API功能直接实现拖放操作，而且拖放的范围已经超出浏览器的边界，HTML5提供的文件api支持拖拽多个文件并上传。

要学会掌握html5中的拖放api和文件api，光标拖放事件，从web网页上访问本地文件系统。

拖放 api

在html5中的拖放api重点：

第一，为页面元素提供了拖放特性；

第二，为光标增加了拖放事件；

第三，提供了用于存储拖放数据的DataTransfer对象

draggable 特性

draggable特性用于定义元素是否允许用户拖放：提供了三个值

true,false,auto

把元素变成可以拖放的：

<div draggable="true"></div>

复制代码

img元素和a元素默认是可以拖放的

光标拖放事件

在html5中提供了 7 个与拖放相关的光标事件：

按照时间的顺序：

第一，开始拖拽时触发的事件，事件的作用对象是被拖拽的元素-dragstart事件

第二，拖放过程中触发的事件，事件的作用对象是被拖拽的元素-drag事件

第三，在拖放的元素进入本元素的范围内时触发，事件的作用对象是拖放过程中光标经过的元素-dragenter元素

第四，在拖放的元素正在本元素的范围内移动时触发，事件的作用对象是拖放过程中光标经过的元素-dragover元素

第五，在拖放的元素离开本元素的范围时触发，事件的作用对象是拖放过程中光标经过的元素-dragleave元素

第六，在拖放的元素被拖放到本元素中时触发，事件的作用对象是拖放的目标元素-drop元素

第七，在拖放操作结束时触发，事件的作用对象是被拖拽的元素-dragend事件

DataTransfer 对象

在html5中提供了DataTransfer对象，用来支持拖拽数据的存储。

实现拖放的过程中数据交换。

DataTransfer对象：

属性

第一，dropEffect属性：用来设置或获取拖拽操作的类型和要显示的光标类型。

如果该操作的效果与起初设置的effectAllowed效果不符，则拖拽操作失败。可以设置修改，包含值可为：none, copy, link, move

第二，effectAllowed属性：用来设置或获取数据传送操作可应用于操作对象的源元素，指定值：none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized

第三，type属性：获取在dragstart事件出发时为元素存储数据的格式，如果是外部文件的拖拽，则返回Files。

第四，files属性：获取存储在DataTransfer对象中的正在拖放的文件列表FileList，可以使用数组的方式去遍历。

方法

第一，clearData()方法：清除DataTransfer对象中存放的数据：

clearData([sDataFormat])

复制代码

[sDataFormat]为可选参数，取值可能为：Text,URL,File,HTML,Image,设置后，可删除指定格式的数据，如果省略该参数，则清除全部数据。

第二，setData()方法：向内存中的DataTransfer对象添加指定格式的数据：

setData([sDataFormat],[data])

复制代码

第三，getData()方法：从内存的DataTransfer对象中获取数据

getData([sDataFormat])

复制代码

第四，setDragImage()方法：设置拖放时跟随光标移动的图片

setDragImage([imgElement],[x],[y])

复制代码

[imgElement]表示图片对象，[x],[y]分别表示相对于光标位置的横坐标和纵坐标

第五，addElement()方法：添加一起跟随拖放的元素，如果想让某个元素跟随被拖动元素一起被拖放，则使用此方法

addElement([element])

复制代码

[element]表示一起跟随拖动的元素对象

示例

// 源元素<div id="dragSource" draggable="true"> 拖动 <img src="images/dadaqianduan.png" width="50" height="50"></div>
// 目标元素<div id="dropTarget"></div>

复制代码

添加ondragstart监听事件，给拖放的源元素添加ondragstart监听事件，在事件触发时把源元素里的内容追加至dataTransfer对象中。

最后，把添加监听事件的处理函数DragStart()追加到window.onload事件中。

function DragStart() { var source = document.getElementById("dragSource"); // 拖放源元素 // 监听dragstart事件，作用在源元素上 source.addEventListener("dragstart", function(e){  e.dataTransfer.setData('text/plain', e.target.innerHTML);  // 向dataTransfer对象中追加数据  e.dataTransfer.effectAllowed="copy"; },false);}// 添加函数DragStart到window.onload监听事件window.addEventListener("load",DragStart,false);

复制代码

添加dragover监听事件，给拖放的目标元素添加dragover监听事件，在事件触发时改变目标元素的样式，并屏蔽浏览器的默认处理事件。

把添加监听事件的处理函数DragOver()追加到window.onload事件中，对于目标元素preventDefault()，必须取消浏览器的默认处理，否则将无法实现拖放功能。

function DragOver() {// 拖放目标元素 var target = document.getElementById('dropTarget'); // 监听dragover事件，作用在目标元素上 target.addEventListener("dragover", function(e){ // 改变样式  this.className = "dragover";  // 取消浏览器的默认处理  e.preventDefault(); },false);}// 添加函数DragStart到window.onload监听事件window.addEventListener("load", DragOver, false);

复制代码

给拖放的目标元素添加ondrop监听事件，事件触发时获取dataTransfer对象中的数据，并追加到目标元素中，同时还还原了样式。

把添加监听事件的处理函数Drop()追加到window.onload事件中。

function Drop(){// 拖放目标元素 var target = document.getElementById('dropTarget'); // 监听drop事件，作用在目标元素上 target.addEventListener('drop',function(e){  var data = e.dataTransfer.getData('text/plain');  //取得dataTransfer对象中的数据  this.innerHTML += data;  e.dataTransfer.dropEffect = "copy";  // 还原样式  this.className="" },false);}// 添加函数DragStart到window.onload监听事件window.addEventListener("load",Drop, false);

复制代码

文件 api

在html5中提供了关于文件操作的文件 api,通过编程方式选择和访问文件数据。

如：FileList对象，File对象，Blob接口，FileReader接口

增加的标签特性

在html5中file类型的表单元素增加了multiple特性和accept特性

multiple 特性

multiple特性可允许用户同时选择多个上传文件。

<input type="file" multiple/>

复制代码

得到一个FileList对象，是一个File对象的列表

accept 特性

规定了可通过文件上传提交的文件类型，实现了打开文件窗口时，默认选中指定的文件类型：

<input type="file" accept="image/gif"/>

复制代码

FileList 对象和 File 对象

在FileList对象里的每一个文件又是一个File对象

示例：

<form action="" method="post"> <input type="file" id="files" multiple/> <input type="button" value="显示文件" onclick="showFiles()"/> <p id="msg"></p></form>
function ShowFiles(){// 获取FileList对象 var fileList = document.getElementById("files").files; var msg = document.getElementById("msg"); var file; for(var i=0; i<fileList.length; i++){  file = fileList[i];  msg.innerHTML += file.name + ";<br/>"; }}

复制代码

Blob 对象

Blob对象表示原始二进制数据，该Blob接口有两个属性：size 和 type

第一，size 属性，表示 Blob 对象的字节长度，可以借助

FileReader 接口读取 Blob 对象的二进制数据，如果 Blob 对象没有字节数，则为 0

第二，type 属性，表示 Blob 对象的MIME类型，未知类型，则返回一个空字符串。

第三，slice()方法，使用 slice()方法可以实现文件的切割，并返回一个新的 Blob 对象。

File 对象和 Blob 对象

File 对象继承了 Blob 对象，所以 File 对象也可以使用 Blob 对象的属性和方法（File 对象可以使用 size 属性和 type 属性）

获取文件的大小和类型

示例：

<form action="" method="post"> <input type="file" id="files" multiple accept="image/*"/> <input type="button" value="显示文件数据" onclick="ShowType()"/> <p id="msg"></p></form>
function ShowType(){// 获取FileList对象 var files = document.getElementById("files").files; var msg = document.getElementById("msg"); var file; for(var i=0; i<files.length; i++){  file=fileList[i];  msg.innerHTML += "字节长度："+file.size+";<br/>";  msg.innerHTML += "文件类型："+file.type+";<br/>"; }}

复制代码

FileReader 接口卡

FileReader 接口提供了一些 读取文件的方法 与 一个波爱护读取结果的事件模型。

FileReader 接口主要把文件读入内存，并读取文件中的数据。

提前检测浏览器是否支持，实现该接口 FileReader

if(typeof FileReader == "undefined"){ console.log();} else { var reader = new FileReader();}

复制代码

FileReader 接口三个属性：

返回读取文件的状态
数据
读取时发生的错误

readyState 属性，只读

读取文件的状态：

EMPTYP，值为 0，表示新的FileReader接口已经构建，且没有调用任何读取方法时的默认状态。
LOADING，值为 1，表示有读取文件的方法正在读取 File 对象或 Blob 对象，且没有错误发生。
DONE，值为 2，表示读取文件结束，可能整个 File 对象或 Blob 对象已经完全读入内存中，在文件读取的过程中出现错误，或在读取过程中使用了 abort()方法强行中断。

result 属性，只读

获取已经读取的文件数据。如是图片，将返回 base64 格式的图片数据。

error 属性，只读

获取读取文件过程中出现的错误：4 种类型

NotFoundError，找不到读取的资源文件。

FileReader 接口会返回 NotFoundError 错误，同时读取文件的方法也会抛出 NotFoundError 错误异常

SecurityError，发生安全错误。

FileReader 接口会返回 SecurityError 错误，同时读取文件的方法也会抛出 SecurityError 错误异常

NotReadableError，无法读取的错误。

FileReader 接口会返回 NotReadableError 错误，同时读取文件的方法也会抛出 NotReadableError 错误异常

EncodingError，编码限制的错误。

通常是数据的URL表示的网址长度受到限制

FileReader 接口的方法

第一，readAsArrayBuffer() 方法，将文件读取为 数组缓冲区

readAsArrayBuffer(<blob>);

复制代码

其中的<blob>表示一个Blob对象的文件。

readAsArrayBuffer()方法会把该 Blob 对象的文件读取为数组缓冲区

第二，readAsBinaryString()方法，将文件读取为二进制字符串。

readAsBinaryString(<blob>);

复制代码

其中的<blob>表示一个Blob对象的文件。

readAsBinaryString()方法会把该 Blob 对象的文件读取为二进制字符串

第三，readAsText() 方法，将文件读取为二进制字符串

readAsText(<blob>,<encoding>);
// 读取为文本，encoding 为文本的编码方式

复制代码

第四，readAsDataURL()方法将文件读取为 DataURL 字符串：

readAsDataURL(<blob>);
// 读取为DataURL字符串

复制代码

第五，abort()方法，中断读取操作

abort() // 没有参数

复制代码

接口的事件

loadstart事件，当开始读取数据时触发的事件
proress事件，当正在读取数据时触发的事件
load事件，当成功完成数据读取时触发的事件
abort事件，当中断读取数据时触发的事件
error事件，当读取数据发生错误时触发的事件
loadend事件，当结束读取数据时触发的事件，数据读取可能成功也可能失败

FileReader 接口

示例：

// 读取文件function ReadAs(action){ var blob = document.getElementById("files").files[0]; if(blob){  var reader = new FileReader(); // 声明接口对象  // 读取文件的方法  switch(action.toLowerCase()){   case "binarystring":    reader.readAsBinaryString(blob);    break;   case "arraybuffer":    reader.readAsArrayBuffer(blob);    break;   case "text":    reader.readAsText(blob);    break;   case "dataurl":    reader.readAsDataURL(blob);    break;  }    reader.onload = function(e){   // 访问FileReader 的接口属性 result,把读取到内存里的内容获取出来   var result = this.result;   // 如果是图文件   if(/image\/\w+/.test(blob.type) && action.toLowerCase() == "dataurl"){    document.getElementById("result").innerHTML = "<img src='" + result + "'/>";   } else {    document.getElementById("result").innerHTML = result；   }  } }}

复制代码

FileReader 接口的事件

示例：

<form action="" method="post"> <input type="file" id="files" multiple accept="image/*"/> <input type="button" value="读取文件" onclick="FileReaderEvent()"/> <p id="message"></p></form>
var blob = document.getElementById("files").files[0];var message = document.getElementById("message");
var reader = new FileReader();// 添加 loadstart 事件reader.onloadstart = function(e){
}// 添加 progress 事件reader.onprogress = function(e){
}// 添加 load 事件reader.onload = function(e){
}// 添加 abort 事件reader.onabort = function(e){
}// 添加 error 事件reader.onerror = function(e){
}// 添加 loadend 事件reader.onloadend = function(e){
}

复制代码

图片拖入浏览器

示例：

定义一个拖放的 drop 事件处理函数 dropHandle()

定义一个用于加载单个文件的函数 loadImg()

// 目标元素的变量var target;// drop 事件处理函数function dropHandle(e){// 获取拖拽的文件 var fileList = e.dataTransfer.files, fileType; // 遍历 for(var i=0; i<fileList.length; i++){  fileType = fileList[i].type;  if(fileType.indexOf('image') == -1) {   alert('');   return;  }  // 加载单个文件  loadImg(fileList[i]); }}
// 加载function loadImg(file){// 声明接口对象var reader = new FileReader();// 添加load事件处理reader.onload = function(e){ var oImg = document.createElement("img"); oImg.src = this.result; target.appendChild(oImg);}// 读取文件reader.readAsDataURL(file);}

复制代码

页面加载完成后，可获取target目标容器，是用于存放拖放进的图片。

给target容器添加 dragover事件处理和 drop 事件处理

window.onload = function() { // 获取目标元素 target = document.getElementById('dropTarget') // 给目标元素添加 dragover 事件处理 target.addEventListener('dragover', function(e){  e.preventDefault(); },false);  target.addEventListener('drop', dropHandle, false);}

复制代码

❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更好的文章

点赞、收藏和评论

我是Jeskson(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)

我们下期见！

文章持续更新，可以微信搜一搜「 程序员哆啦 A 梦 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/#/ 已经收录

github收录，欢迎Star：https://github.com/webVueBlog/WebFamily

发布于: 2021 年 01 月 28 日阅读数: 27

原文链接:【http://xie.infoq.cn/article/056e6fb91ca5f8d279d6b7201】。未经作者许可，禁止转载。

魔王哪吒

关注

微信搜：程序员哆啦A梦 2018.05.08 加入

面向JavaScript爱好人员提供：Web前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和经验分享。博客首发：http://www.dadaqianduan.cn/#/

发布

暂无评论

创作场景

HTML5 中的拖放功能

前言

知识点

拖放 api

draggable 特性

光标拖放事件

DataTransfer 对象

示例

文件 api

增加的标签特性

FileList 对象和 File 对象

Blob 对象

获取文件的大小和类型

FileReader 接口卡

FileReader 接口的方法

FileReader 接口

FileReader 接口的事件

图片拖入浏览器

点赞、收藏和评论

我们下期见！

魔王哪吒

评论