Are you ready?
7 questions to solve
Instructions
- This quiz goes to full-screen once you press the Start button.
- At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
The
dragover event fires on a dropzone after the dragenter event. True or false?Indeed,
dragenter occurs first, followed by the dragover event. Hence, the correct choice is (A). To learn more, refer to JavaScript Drag and Drop — Draggable Elements.Consider the following code:
<section></section>var sectionElement = document.querySelector('section');
sectionElement.ondragenter = function(e) {
e.preventDefault();
console.log('dragenter');
}
sectionElement.ondrop = function(e) {
console.log('drop');
}What will be logged in the console as as a draggable item is brought into the
<section> and then subsequently dropped in there?As a draggable item is brought into the
<section>, the dragstart event will fire, executing the ondragstart handler above, and ultimately logging 'dragenter'. Thereafter, because there is no dragover handler set up, the drop event won't fire. This means that the correct choice is (B). To learn more, refer to JavaScript Drag and Drop — Draggable Elements.Consider the following code:
<img src="image.png">var imageElement = document.querySelector('img');
imageElement.ondragover = function(e) {
e.preventDefault();
}
imageElement.ondrop = function(e) {
console.log('Dropped');
}What will happen as soon as a draggable item is dropped over this
<img> and why?Even though an
<img> is a draggable element, it can still be made a dropzone (in fact, this holds for any draggable element). Given the code above, as soon as a draggable item is dropped over the <img>, the drop event gets dispatched, logging the string 'Dropped'. The correct choice, therefore, is (C). To learn more, refer to JavaScript Drag and Drop — Draggable Elements.Which of the following set of events fires on a draggable element, and in which order, as it's dragged and dropped over a dropzone?
The correct sequence of events is:
dragstart, followed by drag, followed by dragend. To learn more, refer to JavaScript Drag and Drop — Draggable Elements.The
drag event fires on a draggable item only when it's moved. If it remains still, drag doesn't fire. True or false?Surprisingly, the
drag event fires on a draggable element, after the dispatch of dragstart, even when the element doesn't move. This means that the statement above is false. To learn more, refer to JavaScript Drag and Drop — Draggable Elements.If the
drop event fires on a dropzone, as we drop a draggable element over it, it fires after the dragend event gets dispatched on the draggable element. True or false?The
dragend event on the draggable element fires after the drop event on the dropzone. Hence, the statement above is false. To learn more, refer to JavaScript Drag and Drop — Draggable Elements.How to store data on a drag data store associated with a given drag operation?
To store data on a drag operation's underlying drag data store, we ought to refer to the
dataTransfer property of the draggable element's dragstart event and then call its setData() method. Hence, the correct choice is (A). To learn more, refer to JavaScript Drag and Drop — Drag Data.
