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