Scribd
Upload
12 views

Mod 22

Uploaded by

remon.youssef317
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

Mod 22

Uploaded by

remon.youssef317
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Flashcards

Front: What attribute is used to make an element draggable?


Back: The draggable="true" attribute.
Front: What is the role of the dragstart event?
Back: It attaches information to the drag event using the DataTransfer interface.
Front: Name two default draggable elements in HTML.
Back: Images and links.

"Explain [concept] in simple terms with examples."


Concept: Drag-and-Drop API
Explanation: The Drag-and-Drop API allows you to click and drag an element on a
web page to move it elsewhere or transfer data. For example, in a file-upload
feature, you can drag a file from your computer and drop it into a designated area
on a webpage.
Example:
1. HTML: <div id="dragItem" draggable="true">Drag Me</div>
2. JavaScript:
javascript
Copy code
const dragItem = document.getElementById('dragItem');
dragItem.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'Hello, Drag and Drop!');
});

"What are the most important points I need to remember about [topic]?"
Topic: HTML5 Drag-and-Drop API
1. Use the draggable="true" attribute to make elements draggable.
2. Attach data to the drag event with event.dataTransfer.setData().
3. Create drop targets by using dragover (to allow dropping) and drop (to handle
the dropped item) event handlers.
4. Recommended data formats include text/plain for text and text/uri-list for
URLs.
"What are the key terms and their definitions in [chapter/topic]? Provide
examples if possible."
Topic: HTML5 Drag-and-Drop API
 draggable: An attribute that enables elements to be dragged. Example:
<div draggable="true"></div>.
 dragstart: An event triggered when dragging begins. Example:
dragItem.addEventListener('dragstart', handler).
 DataTransfer: An interface used to store and retrieve drag data. Example:
event.dataTransfer.setData('text/plain', 'data').
 dragover: An event used to allow a drop. Example: event.preventDefault().
 drop: An event triggered when an item is dropped. Example:
javascript
Copy code
dropArea.addEventListener('drop', (event) => {
const data = event.dataTransfer.getData('text/plain');
});

"Ask me quiz questions about [topic]. Include multiple-choice."


Question 1: What attribute is required to make an element draggable?
A) draggable="enable"
B) class="draggable"
C) draggable="true"
D) draggable="onDragStart()"
Correct Answer: C) draggable="true"
Question 2: Which event is necessary to allow an element to be dropped into a
target?
A) dragstart
B) drop
C) dragover
D) dragleave
Correct Answer: C) dragover
Question 3: What method retrieves data during a drop event?
A) getData()
B) setData()
C) retrieveData()
D) fetchData()
Correct Answer: A) getData()

You might also like