詳解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對象，都是些實用的功能，不復雜，寫幾遍應該都能掌握。囿於水平有限，勘誤在所不免，望讀者朋友留言指正交流，謝謝啦！