Course: JavaScript

Progress (0%)

  1. Foundation

    Introduction Get Started Console Basics Basics Quiz Exercise: Addition Calculator Variables Exercise: Simple Swapping Constants Comments Data Types Data Types Quiz Exercise: Sorted Numbers Control Flow Functions Exercise: Linear Search Exercise: Iterative Factorial Operators Exercise: Rudimentary Calculator Exercise: Palindromes Scopes Pass By Value Grammar Quiz

  2. Numbers

    Basics Exercise: Finding The Minimum Exercise: Integers Only Number Methods Number Methods Quiz Exercise: Better Precision Math Object Exercise: Sequence In Range Exercise: Random Picks Exercise: Bisection Method Quiz

  3. Strings

    Basics Exercise: Bitwise NOT Unicode Unicode Quiz Exercise: Manual Uppercasing Exercise: Letter Frequency String Methods Exercise: Hyphenated Words Exercise: endsWith() Polyfill Exercise: Title Casing Exercise: Camel Words Exercise: String Split Quiz

  4. Conditions

    Booleans Booleans Quiz if-else Exercise: Exam Grades switch Exercise: Status Codes Conditional Operator Quiz

  5. Loops

    for Loop Exercise: Multiply All Exercise: Greatest Common Divisor Exercise: Selection Sort while Loop Exercise: Collatz Conjecture Quiz

  6. Arrays

    Basics Exercise: Array Reverse Array Methods Exercise: Grocery List Exercise: Camel To Title Array Methods Quiz Exercise: Matrix Arithmetic Exercise: Matrix Rotation Exercise: Matrix Transposition Sorting Sparse Arrays Exercise: Binary Search Quiz

  7. Functions

    Basics Basics Quiz Arguments Closures Closures Quiz Exercise: Euclidean Distance Recursions Exercise: Euclidean Algorithm Function Methods Function Methods Quiz Arrow Functions Arrow Functions Quiz

  8. Objects

    Basics Property Attributes Constructors Constructors Quiz Prototypes Prototypes Quiz Exercise: Square Matrix Class Exercise: Object.create() Polyfill Object Methods Quiz

  9. Exceptions

    Introduction Basics Exercise: Required Arguments

  10. HTML DOM

    Introduction Basics Nodes Nodes Quiz Exercise: Text Content Exercise: Redefining replaceChild() Exercise: Node Count Elements Exercise: Redefining insertAdjacentElement() Exercise: Redefining firstElementChild Exercise: Building Tables Attributes Attributes Quiz Exercise: Redefining className Exercise: HTML Serialization Selecting Elements Selecting Elements Quiz Document Fragments Document Fragments Quiz Exercise: Dynamic Lists Exercise: append() Polyfill Documents Documents Quiz Quiz

  11. CSSOM

    Introduction The style Property Viewport Exercise: Colored Squares Screen Client Exercise: Grid Lines Elements Computed Styles Quiz

  12. Events

    Introduction Basics Exercise: A Simple Counter Exercise: Many Counters Event Objects Exercise: Div Clicked? Exercise: Sortable Tables Event Propagation Mouse Events Exercise: Pointer Circle Exercise: Creating Rectangles Exercise: Right-Click Menu Keyboard Events Scroll Event Scroll Event Quiz Load Events Hashchange Event Popstate Event Popstate Event Quiz

  13. Drag and Drop

    Basics Basics Quiz Draggable Elements Drag Data Dropzones Drop Effects Quiz

  14. opt Touch Events

    Introduction Basics The TouchList Interface The Touch Interface

  15. Misc

    Dates Cookies Timers History Location
  16. Project: Analog Clock
Home / Courses / JavaScript

JavaScript Drag-and-Drop Basics Quiz

Quiz 29 12 questions

Prerequisites for the quiz

  1. JavaScript Drag and Drop — Basics

Are you ready?

12 questions to solve

Instructions
  1. This quiz goes to full-screen once you press the Start button.
  2. At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
The <img> element is draggable by default in web browsers. True or false?
We don't have to manually configure <img> elements to become draggable; they are draggable by default. Hence, the given statement is true. To learn more, refer to JavaScript Drag and Drop — Basics.
The <div> element is draggable by default in web browsers. True or false?
The <div> element is not draggable by default; we have to manually configure it to become one. To learn more, refer to JavaScript Drag and Drop — Basics.
The <a> element, without an href, is draggable by default in web browsers. True or false?
Just like <img>, <a> elements (but only those with an href) are also draggable by default. This means that the statement above is false, hence the choice (B). To learn more, refer to JavaScript Drag and Drop — Basics.
Text selections are draggable by default in web browsers. True or false?
Indeed, text selections are also draggable by default in web browsers. To learn more, refer to JavaScript Drag and Drop — Basics.
How to make any given HTML element draggable?
The draggable HTML attribute is used to make an HTML element draggable. Hence, the correct choice is (A). To learn more, refer to JavaScript Drag and Drop — Basics.
A dropzone element is also referred to as which of the following?
A dropzone element is also referred to by the following names: droppable element, droppable, drop region, and drop target. A source node doesn't refer to a dropzone, but rather to a draggable element. To learn more, refer to JavaScript Drag and Drop — Basics.
The following code does NOT work as expected to make the given <div> element draggable. Explain the problem and how to rectify it.
<div draggable>A div</div>
The draggable attribute is not a Boolean attribute, which means that we can't just specify it as it is inside an element; we have to explicitly set it to a value, which can either be "true" or "false" (or even "auto"). Hence, the correct choice is (B). To learn more, refer to JavaScript Drag and Drop — Basics.
The dragstart event fires on a dropzone as soon as an item is dragged into it. True or false? If false, give the correct statement.
The dragstart event fires on a draggable element as soon as the element is begun to be dragged. Hence, the correct choice is (C). The dragstart event doesn't fire on a dropzone, as indicated in choice (B). To learn more, refer to JavaScript Drag and Drop — Basics.
What does calling preventDefault() inside the dragstart handler do?
When we call preventDefault() upon the dragstart event, the drag operation is effectively canceled — we can't then drag the respective element. Hence, the correct choice is (C). To learn more, refer to JavaScript Drag and Drop — Basics.
Setting draggable="true" on an <img> element is redundant. True or false?
Since <img> elements are already draggable by default, it's redundant to set draggable="true" manually on them. Therefore, the statement above is true. To learn more, refer to JavaScript Drag and Drop — Basics.
The dragover event fires just once on a dropzone element as soon as an item is dragged over it. True or false? If false, then give the correct description.
The dragover event fires as soon as a draggable item is brought over a dropzone element. One unique trait of dragover is that it fires repeatedly (even if we don't move the mouse) on the dropzone. This goes with the choice (B). To learn more, refer to JavaScript Drag and Drop — Basics.
Handling the dragover event and cancelling its default action is necessary to be able to get drop dispatched on an element that's not a dropzone by default. True or false?
If we don't handle dragover and cancel its default behavior, the browser tends to not dispatch a subsequent drop event on the underlying dropzone. Hence, the statement above is absolutely true. To learn more, refer to JavaScript Drag and Drop — Basics.

Next Chapter

Drag and Drop - Draggable Elements

More courses

JavaScript RegExp course image

JavaScript RegExp

Matching patterns within strings in JavaScript

Difficulty: Novice

Duration: 2 hrs 54 mins
HTML course image

HTML

A language to define the content and structure of webpages

Difficulty: Novice

Duration: 12 hrs 36 mins
Explore Courses