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>
<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
e.preventDefault();
//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
e.preventDefault();
//Block default behavior
e.stopPropagation();
//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);
node.appendChild(textnode);
this.appendChild(node);
//Delete dragged elements
document.querySelector('#drags').removeChild(elementDragged);
return false;
});
</script>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.
