Quick JavaScript Interview Questions (2015)
Chapter 14. Drag & Drop API
Q. How to make content draggable inside the browser? ANSWER
HTML5 provides drag and drop feature. An element can be made draggable by setting its draggable property to true. Check the below code having 2 buttons. One button is draggable and other is just a normal button.
<!DOCTYPE html>
<html>
<head>
<title>Draggable Element</title>
</head>
<body>
<button draggable="true">Draggable Button</button> <button>Normal Button</button>
</body>
</html>
Below screenshot shows both these buttons. The draggable button is movable while the normal button is fixed in its position.
Q. What happens when drag starts for an element?
ANSWER
There are 3 important key points to note when a drag starts. These key points are as follows.
Drag Data: It represent the type of data that will be transferred while dragging
Drag Feedback: This represents image which appears beside the mouse pointer during the drag operation. Drag Effect: This represents the type of drag happens to element. It can be 3 types and listed below.
o Copy: This effect indicates that the
data being dragged will be copied from its present location to the drop location.
o Move: This effect indicates that the data being dragged will be moved from its original position to drop
location.
o Link: This effect indicates that some form of relationship or connection will be created between the source and drop locations.
Q. What are the Drag and drop events?
ANSWER
There are 7 different drag and drop events that can be attached
with a callback method programmatically.
Dragstart: it is fired on an element when a drag is started Dragenter: it is fired when the mouse enters an element while a drag is occurring.
Dragover: This event is fired as the mouse is moving over an element when a drag is occurring.
Dragleave : This event is fired when the mouse leaves an element while a drag is occurring.
Drop: The drop event is fired on the element where the drop occurred at the end of the drag operation.
Dragend: The source of the drag will receive a dragend event when the drag operation is complete, whether it was successful or not.
Q. What is a dataTransfer property?
ANSWER
dataTransfer object holds the piece of data sent in a drag action. dataTransfer is set in the dragstart event and read/handled in the drop event. The syntax for setting value in dataTransfer object is as follows.
event.dataTransfer.setData(format, data)
The above syntax will set the object's content to the mime type and data payload passed as arguments.
Q. Develop an example to drag and drop an element from one place to another?
ANSWER
To demonstrate drag and drop we have created div element with rounded border and background color red. We will drag this element and drop it in a container. The following code shows the drag and drop example.
<!DOCTYPE HTML>
<html>
<head>
< style>
#ball{
width:50px;
height:50px;
background: red; border-radius: 100%;
}
#dropZone {
width:200px;
height:100px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="dropZone"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<br>
<div id="ball"
draggable="true"
ondragstart="drag(event)"></div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
The output of the code looks like following screenshot before dragging with both the element are in there original position.
The output of the code looks like following screenshot after dragging and dropping the draggable element to the container.
