HTML Drag & Drop API - 2

•

🔷 About HTML Drag & Drop API - 2 A Thread🧵 👇

2️⃣ What to Drag ondragstart and setData() → Then, specify what should happen when the element is dragged. → In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.

→ The dataTransfer.setData() method sets the data type and the value of the dragged data. → In this case, the data type is "text" and the value is the id of the draggable element ("drag1").

3️⃣ Where to Drop - ondragover → The ondragover event specifies where the dragged data can be dropped. → By default, data/elements cannot be dropped in other elements. → To allow a drop, we must prevent the default handling of the element.

→ This is done by calling the event.preventDefault() method for the ondragover event.

4️⃣ Do the Drop- ondrop → When the dragged data is dropped, a drop event occurs. → In the example above, the ondrop attribute calls a function, drop(event).

→ Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop). → Get the dragged data with the dataTransfer.getData() method.

→ This method will retum any data that was set to the same type in the setData() method. → The dragged data is the id of the dragged element ("drag1"). → Append the dragged element into the drop element.

Thanks for reading this thread ❤️ If you like it , make sure you: 🔷 Like the tweet 🔷 Retweet the first tweet ⚡ For more content , follow: @MrunayU