HTML5 Drag-and-Drop Api

W3schools simple demo: w3schools.com. Data Transfer object: developer.mozilla.org. React drag-and-drop library: github.com/react-dnd/react-dnd. And accompanying course: memcode.com/courses/146

3 flashcards · Programming Languages · by lakesare

1. How would you implement DnD in HTML5?

   make img draggable add ondragstart event to img. add ondragover and ondrop events to section. <section ondrop="onDrop(event)" ondragover="onDragOver(event)"/> <img id="rrr" draggable="true" ondragstart="onDragStart(event)"/> function onDragOver(e) { e.preventDefault(); } function onDragStart(e) { e.dataTransfer.setData("text", e.target.id); } function onDrop(e) { e.preventDefault(); const data = e.dataTransfer.getData("text"); e.target.appendChild(document.getElementById(data)); }

2. What's DataTransfer object needed for? How can we access it?

   DataTransfer holds information about the object being dragged (draggable=true). It's available from the dataTransfer property of all drag events, e.g.: const onDrop = (event) => event.dataTransfer;

3. Name 3 methods on a DataTransfer object.

   DataTransfer#getData('text') - Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data. DataTransfer#setData('text', 5) - Set the data for a given type. DataTransfer#setDragImage() - Set the image to be used for dragging if a custom one is desired.