上一篇介绍了拖拽的基础知识,这节我们谈谈拖拽的一些应用
HTML5不仅仅定义了拖拽的事件类型,还在事件对象中规范了一个重量级的对象:dataTransfer,借助它,我们可以实现数据传输、拖拽图案设定、拖拽文件上传,可通过event.dataTransfer来访问该对象.
数据的传输
需要借助event.dataTransfer
对象的一些方法实现。通过setData(dataType:string,data:string)
来设置待传输的数据,通过getData(dataType:string)
来获取传送的数据.可设置文本、html类型、url类型等。 步骤如下:
- dragstart ,设置数据
- drop,获取并访问数据。
let dragEle = document.querySelector('#drag-ele');
let dropTarget = document.querySelector('#drop-target');
dragEle.addEventListener('dragstart',event=>{
event.dataTransfer.setData('text/plain','i love you')
})
dropTarget .addEventListener('dragover',event=>{
//取消默认事件,激活drop
event.preventDefault();
})
dropTarget .addEventListener('drop',event=>{
let data = event.dataTransfer.getData('text/plain');
console.log(data);// 'i love you'
})
复制代码
自定义拖拽效果
在拖拽过程中,浏览器默认了一些效果,可以通过设置dataTransfer的一些属性或方法达到美观效果。
指定一张图片,在拖拽中跟随鼠标
dragstart阶段配置:setDragImage(img:element,offsetX:number,offsetY:number)
let imgEle = document.querySelector('#img-ele')
dragEle.addEventListener('dragstart',event=>{
//计算图片的高度和宽度的一半,作为x、y轴的偏移,使图片居中
var offsetX = parseFloat(getComputedStyle(imgEle ).width)/2;
var offsetY = parseFloat(getComputedStyle(imgEle ).height)/2;
event.dataTransfer.setDragImage(imgEle ,offsetX,offsetY);
})
复制代码
小图标提示
此处意义不是特别大,一般默认就行了。
允许释放的类型(仅作为提示效果,并不做真正的限制).
- 首先设置拖动元素的允许效果(
effectAllowed
) - 其次设置释放元素的释放效果(
dropEffect
) - 允许效果应该在释放效果之内:比如effectAllowed=copy,那么dropEffect必须包含copy才行(可以为copy,也可为all表示包含所有)
dragEle.addEventListener('dragstart',event=>{
event.dataTransfer.effectAllowed = 'copy';//设置复制类型
})
dropTarget .addEventListener('dragover',event=>{
//取消默认事件,激活drop
event.preventDefault();
})
dropTarget .addEventListener('drop',event=>{
event.dataTransfer.dropEffect = 'copy';//必须允许上面设置的copy类型
//设置为all允许所有,也是ok的。
})
复制代码
拖拽上传文件
拖拽上传功能应该是最有用的了,本文使用formData上传文件。以express举例说明。 与普通拖拽并无二致,可以从桌面、资源管理器中拖动文件释放到对应的元素上。
注意:
- 拖动文件到浏览器中,浏览器会默认打开该文件,需要手动阻止该默认行为。在
dragover
、drop
中阻止默认行为:preventDefault. - drop后直接打印event.dataTransfer看到files属性为空,但是直接访问该属性是可以拿到文件内容的
dragTarget.addEventListener('dragover',event=>{
//阻止默认行为
event.preventDefault();
})
dragTarget.addEventListener('drop',event=>{
//阻止文件打开默认行为
event.preventDefault();
let file = event.dataTransfer.files[0];
var formData = new FormData();
formData.append('book',file);
var xhr = new XMLHttpRequest();
xhr.open('post','http://localhost:8080/profile');
xhr.send(formData)
})
复制代码
关于后端express的代码上传到了github,如需要请自取。
总结
拖拽事件对象的dataTransfer对象,都是些实用的功能,不复杂,写几遍应该都能掌握。囿于水平有限,勘误在所难免,望读者朋友留言指正交流,谢谢啦!