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 = [Link]('dragItem');
[Link]('dragstart', (event) => {
[Link]('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 [Link]().
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:
[Link]('dragstart', handler).
DataTransfer: An interface used to store and retrieve drag data. Example:
[Link]('text/plain', 'data').
dragover: An event used to allow a drop. Example: [Link]().
drop: An event triggered when an item is dropped. Example:
javascript
Copy code
[Link]('drop', (event) => {
const data = [Link]('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()