Which feature was introduced in HTML5?

HTML5 introduced several new features that enhanced web development capabilities significantly. One of the notable features is the native drag-and-drop capability.

Native Drag-and-Drop Capability:

Description: HTML5 allows developers to create drag-and-drop interfaces natively using the draggable attribute and the DragEvent interface. This means elements can be dragged and dropped within a web page without requiring external JavaScript libraries.

Implementation:

Making an Element Draggable: To make an element draggable, you set the draggable attribute to true:

Handling Drag Events: You use event listeners for drag events such as dragstart, dragover, and drop:

document.getElementById("drag1").addEventListener("dragstart", function(event) {

event.dataTransfer.setData("text", event.target.id);

});

document.getElementById("dropzone").addEventListener("dragover", function(event) {

event.preventDefault();

});

document.getElementById("dropzone").addEventListener("drop", function(event) {

event.preventDefault();

var data = event.dataTransfer.getData("text");

event.target.appendChild(document.getElementById(data));

});

Example: This example demonstrates a simple drag-and-drop operation:

html

Copy code

References:

W3C HTML5 Specification - Drag and Drop

MDN Web Docs - HTML Drag and Drop API

HTML5 Doctor - Drag and Drop

HTML5's native drag-and-drop feature streamlines the process of creating interactive web applications by eliminating the need for third-party libraries, thus making it a powerful addition to the HTML standard.