HTML Questions & Answers – Drag and Drop

This set of HTML Multiple Choice Questions & Answers (MCQs) focuses on “Drag and Drop”.

1. Which event is fired as the mouse is moving over an element when a drag is occurring?
a) dragover
b) dragenter
c) dragstart
d) dragleave
View Answer

Answer: a
Explanation: The dragover event is fired as the mouse is moving over an element when a drag is occurring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event. When draggable element enters a drop target then dragenter event has occurred. A dragleave event occurs when it leaves the valid drop target. Whenever a user starts to drag an element, dragstart is fired.

2. The _________ event is fired on the element where the drop occurred at the end of the drag operation.
a) drag
b) drop
c) dragstart
d) dragenter
View Answer

Answer: b
Explanation: The drop event is fired on the element where the drop occurred at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location. Whenever user starts to drag an element, dragstart is fired. When draggable element enters a drop target then dragenter event is occurred. When element is being dragged, drag event is happened.

3. Which of the following property is common in all drag events?
a) drag effects
b) drag data
c) dataTransfer
d) dragenter
View Answer

Answer: c
Explanation: The feedback given by the user using drag and drop operation is done by drag effects. Drag data includes all the data needed for drag operation. The dataTransfer property of all drag events holds data about the drag and drop operation. When draggable element enters a drop target then dragenter event is occurred.
advertisement
advertisement

4. _____________ in textboxes and selections on web pages is done automatically, so you do not need to handle dragging yourself.
a) Dragging HTML and XML
b) Dragging Text
c) Dragging Files
d) Dragging Links
View Answer

Answer: b
Explanation: Although the process is automatic, it is recommended that you always add data of the text/plain type as a fallback for applications or drop targets that do not support other types, unless there is no logical text alternative. Always add the plain text type last as it is the least specific.

5. Calling the ______________ method during both a dragenter and dragover event will indicate that a drop is allowed at that location.
a) drop
b) drag
c) preventDefault
d) dataTransfer
View Answer

Answer: c
Explanation: The drop event is fired on the element where the drop occurred at the end of the drag operation. When element is being dragged, drag event has happened. Calling the preventDefault method during both a dragenter and dragover event will indicate that a drop is allowed at that location. However, you will commonly wish to call the preventDefault method only in certain situations, for example, only if a link is being dragged. The dataTransfer property of all drag events holds data about the drag and drop operation.
Sanfoundry Certification Contest of the Month is Live. 100+ Subjects. Participate Now!

6. Which of the following property is used to determine which drag operation was desired?
a) dragend
b) getData
c) dropEffect
d) captureData
View Answer

Answer: c
Explanation: When the user finishes dragging an element, dragend is occurred. During the drop event, you should retrieve that data that was dropped from the event and insert it at the drop location. One can use the dropEffect property to determine which drag operation was desired.

7. ______________ should include data of two types; the first should be the URL using the type text/uri-list, and the second is the URL using the text/plain type.
a) Dragging HTML and XML
b) Dragging Text
c) Dragging Files
d) Dragging Links
View Answer

Answer: d
Explanation: Dragging Links should include data of two types; the first should be the URL using the type text/uri-list, and the second is the URL using the text/plain type.
advertisement

8. A listener for the dragenter and dragover events are used to indicate valid drop targets, that is, places where dragged items may be dropped.
a) True
b) False
View Answer

Answer: a
Explanation: The dragover event is fired as the mouse is moving over an element when a drag is occurring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event. When draggable element enters a drop target then dragenter event is occurred.

9. _____________ and elements in a document may be dragged using the application/x-moz-node type.
a) Dragging HTML and XML
b) Dragging Text
c) Dragging Nodes
d) Dragging Links
View Answer

Answer: c
Explanation: Dragging Nodes and elements in a document may be dragged using the application/x-moz-node type.
advertisement

Sanfoundry Global Education & Learning Series – HTML.

To practice all areas of HTML, here is complete set of 1000+ Multiple Choice Questions and Answers.

If you find a mistake in question / option / answer, kindly take a screenshot and email to [email protected]

advertisement
advertisement
Subscribe to our Newsletters (Subject-wise). Participate in the Sanfoundry Certification contest to get free Certificate of Merit. Join our social networks below and stay updated with latest contests, videos, internships and jobs!

Youtube | Telegram | LinkedIn | Instagram | Facebook | Twitter | Pinterest
Manish Bhojasia - Founder & CTO at Sanfoundry
Manish Bhojasia, a technology veteran with 20+ years @ Cisco & Wipro, is Founder and CTO at Sanfoundry. He lives in Bangalore, and focuses on development of Linux Kernel, SAN Technologies, Advanced C, Data Structures & Alogrithms. Stay connected with him at LinkedIn.

Subscribe to his free Masterclasses at Youtube & discussions at Telegram SanfoundryClasses.