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
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
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
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.
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
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
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.
6. Which of the following property is used to determine which drag operation was desired?
a) dragend
b) getData
c) dropEffect
d) captureData
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
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.
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
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
Explanation: Dragging Nodes and elements in a document may be dragged using the application/x-moz-node type.
10. Which method is used to get user’s position?
a) getCurrentPosition()
b) getDirectPosition()
c) post()
d) getDirection
Explanation: For getting user’s position we used getCurrentPosition() method. Syntax is navigator.geolocation.getCurrentPosition(showPosition). It is supported by most of the browsers like Chrome, Firefox, Internet Explorer, Opera etc.