互联网技术总是在向强大、便捷发展,怎样使用这些层出不穷的技术来改善我们的既有设计,是很能检验开发人员想象力和创造力的。
一个引子:
因为要搜索电影的字幕,打开了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
相关推荐
而且我已经把windows和linux的vmtools包,以及解决拖拽的问题脚本Drag&Drop_FixPatch一并加入进来,欢迎大家下载使用。 注意:因为大小问题,我分为两卷: VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch(1) ...
使用Drag&Drop接受文件名的输入框(13KB)
而且我已经把windows和linux的vmtools包,以及解决拖拽的问题脚本Drag&Drop_FixPatch一并加入进来,欢迎大家下载使用。 注意:因为大小问题,我分为两卷: VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch(1) ...
Window下拖放操作Drag & Drop 全解析
Drag & drop source code android
很不错的drag & drop,类似于igoogle,在个人主页上都用得上,没有设置保存功能,有兴趣的朋友可以自己试一下
WPF 实现了两个listbox之间拖动,drag&drop,并且有上下按钮控制listbox里面元素的移动,还有拖动时边框变色,1分,你值得拥有。
Enhanced Drag & Drop(3KB)
IOS应用源码之【类库与框架】DragKit - an iOS framework for enabling drag & drop behavior
【类库与框架】★★★★★-DragKit - an iOS framework for enabling drag & drop【类库与框架】★★★★★-DragKit - an iOS framework for enabling drag & drop 1.适合学生学习研究参考 2.适合个人学习研究参考 3...
IOS应用源码之【类库与框架】-DragKit - an iOS framework for enabling drag & drop behavior.rar
eclipse rcp 关于拖动的文档,里面也有代码例子,但不是完整demo
wpf拖拽移动列表项的功能,两个datagrid中可以互相拖拽并移动一行数据
Ole Drag and Drop Example.
基于 Windows Shell 的拖放支持,跨应用。
drag和drop事件
一个不错的示例,自己也收藏一下.