» » Drag and Drop Drag and Drop for HTML5


Drag and Drop Drag and Drop for HTML5

Author: bamboo06 on 11-11-2018, 21:41, views: 2212

Drag & Drop is a common feature that grabs an object and drags it to another location. In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped. In the past, we used the Mousedown, Mouseove, Mouseup and other events of the mouse to constantly acquire the coordinates of the mouse to modify the position of the element. Now the html5 native Drag & Drop event (DnD) is convenient and the performance is improved.

Internet Explorer 9+, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.

How to make an object dragged
To make the element draggable, set the draggable property to true :
<div draggable="true">dragable div</div>

Note: In most browsers, the a element and the img element are drag and drop by default, but for security reasons, it is best to add the draggable attribute.

Drag event
Dragstart: Triggered when a web page element begins to drag.
Drag: The dragged element is continuously triggered during the dragging process.
Dragenter: Triggered when the dragged element enters the target element, the event should be listened to at the target element.
Dragleave: Triggered when the dragged element leaves the target element, the event should be listened to at the target element.
Dragover: The triggered element continues to fire when it stays in the target element. The event should be listened to at the target element.
Drap: The dragged element or the file selected from the file system, triggered when dragged and dropped.
Dragend: Triggered when the page element is dragged.
Note: All of these events can specify a callback function.

dataTransfer object
During the dragging process, the event parameters accepted by the callback function have a dataTransfer property. It points to an object that contains various information related to dragging.
draggableElement.addEventListener('dragstart', function(event) {       
	event.dataTransfer.setData('text', 'Helloweba');

The above code stores a text message on the dataTransfer object at the beginning of the drag, the content is "Helloweba". When the drag and drop ends, you can use the getData method to retrieve this information.
The properties of the dataTransfer object:
effectAllowed: Specifies the allowed operations. Possible values ​​are copy, move, link, copyLink, copyMove, linkMove, all, none, and uninitialized (default, equivalent to all, which allows everything).
Files: contains a FileList object, which means that the files involved in drag and drop are mainly used to process files that are dragged into the browser from the file system.
Types: The type of data stored in the DataTransfer object.
The method of the dataTransfer object:
setData(format, data): Stores data on the dataTransfer object. The first parameter format is used to specify the type of data stored, such as text, url, text/html, and so on.
getData(format): fetches data from the dataTransfer object.
clearData(format): Clears the data stored by the dataTransfer object. If the format parameter is specified, only the data in that format is cleared, otherwise all data is cleared.
setDragImage(imgElement, x, y): Specifies the image to display during dragging. By default, many browsers display a translucent version of a dragged element. The parameter imgElement must be an image element, not a path to the image, and the parameters x and y represent the position of the image relative to the mouse.
The dataTransfer object allows data to be stored on it, which makes it possible to transfer information between the dragged element and the target element.

Instance code
In the example, we set to drag and drop elements from one box to another.
The HTML structure is as follows:
<ul id="drags">
	<li draggable="true">A</li>
	<li draggable="true">B</li>
	<li draggable="true">C</li>
<ul id="drops"></ul>

#drags is the object box being dragged, and #drops is the target area box.
javascript code:
<script type="text/javascript">
//Get the target element
var target = document.querySelector('#drops');
//Get the elements you need to drag and drop
var dragElements = document.querySelectorAll('#drags li');
//Temporarily record the elements being dragged and dropped
var elementDragged = null;
//Loop listener drag and drop elements are dragged and dropped and end drag and drop events
for (var i = 0; i < dragElements.length; i++) {
	//Start drag and drop event monitoring
	dragElements[i].addEventListener('dragstart', function(e) {
		//Set the data parameters of the current drag and drop element
		e.dataTransfer.setData('text', this.innerHTML);
		//Save the current drag and drop object
		elementDragged = this;
	//End drag and drop event listener
	dragElements[i].addEventListener('dragend', function(e) {
		//Logout the current drag and drop object
		elementDragged = null;
//Target element listener is dragged and dropped element into event
target.addEventListener('dragover', function(e) {
	//Block browser default behavior
	//Set mouse style
	e.dataTransfer.dropEffect = 'move';
	return false;
//The target element listens when the dragged and dropped element falls.
target.addEventListener('drop', function(e) {
	//Block default behavior
	//Block default behavior
	//Get the data parameters of the currently dragged and dropped elements
	var text = e.dataTransfer.getData('text');
	//Building elements
	var node=document.createElement("li");
	var textnode=document.createTextNode(text);

	//Delete dragged elements
	return false;

Note that we want to call preventDefault() to avoid the browser's default handling of the data (the default behavior of the drop event is opened as a link), in addition to getting the dragged data via the dataTransfer.getData("Text") method. This method will return any data of the same type set in the setData() method.

Tags: html5, drop, drag

Category: HTML5

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
  • 0 Articles
17 November 2018 02:54


  • Group: Guests
  • РRegistered date: --
  • Status:
I appreciate browsing your web site. Many thanks! http://ranking-powiekszanie-penisa.eu/Penigen.html

Comment on the news site is possible only within (days) days from the date of publication.