HTML5实践Drag&Drop

 

互联网技术总是在向强大、便捷发展，怎样使用这些层出不穷的技术来改善我们的既有设计，是很能检验开发人员想象力和创造力的。

 

一个引子：

 

因为要搜索电影的字幕，打开了http://www.shooter.cn，发现可以直接拖动文件到搜索栏，这是HTML5支持的功能，用在这里能够很好的提升搜索效率，避免用户手动输入电影名，也能够提升搜索结果的准确度。

 

有篇文章介绍了Drag&Drop功能，http://javascript.ruanyifeng.com/dom/dragndrop.html，mark一下

 

 1、html元素可拖动

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

 

2、拖动事件

dragstart：网页元素开始拖动时触发。
drag：被拖动的元素在拖动过程中持续触发。
dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
drop：被拖动元素或从文件系统选中的文件，拖放落下时触发。
dragend：网页元素拖动结束时触发。

draggableElement.addEventListener('dragstart', function(e) {
  console.log('拖动开始！');
});

 

3、dataTransfer对象：拖动相关的各种信息

draggableElement.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('aa', 'test abc');
});

dropEffect： 拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为 copy、move、link 和 none。
effectAllowed：指定所允许的操作，可能的值为 copy、move、link、copyLink、copyMove、linkMove、all、none 和 uninitialized（默认值，等同于all，即允许一切操作）。
files：包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types：储存在DataTransfer对象的数据的类型。

setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
getData(format)：从dataTransfer对象取出数据。
clearData(format)：清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
setDragImage(imgElement, x, y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。

 

4、实例：拖动元素、文件，参考附件

5、FileReader：用来把文件读入内存，并且读取文件中的数据。

readAsBinaryString(file) //将文件读取二进制码,通常我们将它传送到后端，后端可以通过这段字符串存储文件
readAsText(file,[encoding]) //将文件读取文本,第二个参数是文本的编码方式，默认UTF-8
readAsDataURL(file) //将文件读取为一串Data URL字符串，将小文件以一种特殊格式的URL地址直接读入页面。小文件指图像与html等格式的文件
abort() //中断读取操作

onabort         //数据读取中断时触发
onerror         //数据读取出错时触发
onloadstart     //数据读取开始时触发
onprocess       //数据读取中
onload          //数据读取成功完成时触发
onloadend       //数据读取完成时触发，无论成功失败

name、lastModifiedDate、type、size

 

6、总结：上面所有东西都包含在http://bgrins.github.io/filereader.js/#，https://github.com/bgrins/filereader.js，filereader.js集大成者，还提供了很实用的功能，从剪贴板复制图片到网页上，比选中文件方便100倍啊!!!结合jQuery还可以实现粘贴上传功能，参考http://blog.bingo929.com/renren-drag-drop-photo-filereader-formdata.html，http://blog.csdn.net/fdipzone/article/details/37974511