详解javascript拖拽（二）拖拽的应用及示例

上一篇介绍了拖拽的基础知识，这节我们谈谈拖拽的一些应用

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对象，都是些实用的功能，不复杂，写几遍应该都能掌握。囿于水平有限，勘误在所难免，望读者朋友留言指正交流，谢谢啦！