In the last post, we introduced the basics of drag and drop. Now we’ll talk about some applications of drag and drop

HTML5 not only defines the drag-and-drop event type, but also defines a heavyweight object in the event object: dataTransfer. With the help of it, we can realize data transmission, drag-and-drop pattern setting, drag-and-drop file upload, and access the object through event.datatransfer.

Transmission of data

Some methods of the Event.datatransfer object are needed. Through the setData (dataType: string, data: string) to set the transmission of data, through the getData (dataType: string) to obtain the data transfer. You can set the text, HTML type, and URL type. The steps are as follows:

  • Dragstart, set the data
  • Drop, get and access data.
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=>{
	// Disable the default event and activate drop
	event.preventDefault();
})
dropTarget .addEventListener('drop',event=>{
	let data = event.dataTransfer.getData('text/plain');
	console.log(data);// 'i love you'
})
Copy the code

Custom drag-and-drop effects

During the drag and drop process, the browser defaults to some effects that can be achieved by setting some properties or methods of the dataTransfer.

Specify an image and follow the mouse in the drag

Dragstart stage configuration: setDragImage (img element, offsetX: number, offsetY: number)

let imgEle = document.querySelector('#img-ele')
dragEle.addEventListener('dragstart',event=>{
		// Calculate half of the height and width of the image as the offset of the x and y axes, so that the image is centered
        var offsetX = parseFloat(getComputedStyle(imgEle ).width)/2;
        var offsetY = parseFloat(getComputedStyle(imgEle ).height)/2;
        event.dataTransfer.setDragImage(imgEle ,offsetX,offsetY);
})
Copy the code
Small icon prompt

Here the meaning is not particularly big, generally default on the line.

Types that are allowed to be released (only as hints, no real restrictions).

  • First set the drag elementAllow the effect(effectAllowed)
  • Next, set the release elementRelease the effect(dropEffect)
  • The allowed effect should be within the release effect: for example, effectAllowed=copy, then the dropEffect must contain copy (either copy or all means include all).
dragEle.addEventListener('dragstart',event=>{
	event.dataTransfer.effectAllowed = 'copy';// Set the replication type
})
dropTarget .addEventListener('dragover',event=>{
	// Disable the default event and activate drop
	event.preventDefault();
})
dropTarget .addEventListener('drop',event=>{
	event.dataTransfer.dropEffect = 'copy';// The copy type set above must be allowed
	// Set to all to allow all, also ok.
})
Copy the code

Drag and drop the upload file

The drag-and-drop upload feature is probably the most useful. This article uses formData to upload files. Take express as an example. Just like normal drag and drop, you can drag files from the desktop, explorer to release the corresponding elements.

Note:

  • Drag the file into the browser,The browser will open the file by default, you need to manually prevent the default behavior. indragover,dropPreventDefault: preventDefault.
  • After the drop, print event.datatransfer and see that the files property is empty, but access the property directly can get the contents of the file
dragTarget.addEventListener('dragover',event=>{
	// Block the default behavior
	event.preventDefault();
})
dragTarget.addEventListener('drop',event=>{
	// Prevent file opening by default
	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)
})

Copy the code

The code for the backend Express is uploaded to Github, please help yourself if needed.

conclusion

Drag and drop the dataTransfer object of the event object, these are practical functions, not complex, should be able to write several times to master. Be limited at the level, erratum unavoidable, hope reader friend message corrects exchange, thank!