Drag and Drop & HTML APIs

HTML comes with a set of built-in browser APIs that pair markup with a little JavaScript: drag and drop, editable content, storing data, geolocation and more. This lesson tours the ones most closely tied to HTML attributes and elements.

Drag and drop

<style>
  .zone { min-height: 60px; border: 2px dashed #b9c2d4; border-radius: 8px; padding: 8px; margin: 6px 0; }
  .zone.over { border-color: #d6336c; background: #fbe4ec; }
  .item { display: inline-block; padding: 6px 10px; margin: 4px; background: #10131c; color: white; border-radius: 6px; cursor: grab; }
</style>
<p>Drag the tasks into "Done":</p>
<div class="zone" id="todo">
  <span class="item" draggable="true" id="t1">Write HTML</span>
  <span class="item" draggable="true" id="t2">Add CSS</span>
</div>
<div class="zone" id="done"><strong>Done:</strong></div>
<script>
  document.querySelectorAll(".item").forEach(item =>
    item.addEventListener("dragstart", e => e.dataTransfer.setData("text/plain", item.id)));
  document.querySelectorAll(".zone").forEach(zone => {
    zone.addEventListener("dragover", e => { e.preventDefault(); zone.classList.add("over"); });
    zone.addEventListener("dragleave", () => zone.classList.remove("over"));
    zone.addEventListener("drop", e => {
      e.preventDefault();
      zone.classList.remove("over");
      zone.append(document.getElementById(e.dataTransfer.getData("text/plain")));
    });
  });
</script>

Result

draggable="true" makes an element draggable (links and images are by default).
dragstart stores data about what's being dragged in dataTransfer.
A drop target must call preventDefault() in dragover to allow dropping, then handles the drop event.

Drag and drop is mouse-centred: it doesn't work on most touch screens without extra code and isn't keyboard-accessible. Always provide another way to do the same thing, such as "Move to Done" buttons.

Dropping files

<style>
  #drop { border: 2px dashed #1a5fb4; border-radius: 8px; padding: 24px; text-align: center; }
</style>
<div id="drop">Drop an image file here</div>
<p><label for="pick">…or choose one:</label> <input id="pick" type="file" accept="image/*"></p>
<div id="preview"></div>
<script>
  const show = file => {
    if (!file) return;
    const img = new Image(160, 120);
    img.alt = "Preview of " + file.name;
    img.style.objectFit = "cover";
    img.src = URL.createObjectURL(file);
    document.getElementById("preview").replaceChildren(img);
  };
  const drop = document.getElementById("drop");
  drop.addEventListener("dragover", e => e.preventDefault());
  drop.addEventListener("drop", e => { e.preventDefault(); show(e.dataTransfer.files[0]); });
  document.getElementById("pick").addEventListener("change", e => show(e.target.files[0]));
</script>

Result

Files dropped from the computer appear in dataTransfer.files. The file input next to it is the accessible fallback.

contenteditable

Any element can become editable. Rich text editors are built on this, though a full editor needs a lot more code to be robust.

Other HTML-related APIs

API	What it does
Web Storage	`localStorage` and `sessionStorage` save small amounts of data in the browser
Geolocation	The user's location, with permission
Clipboard	Copy and paste text and images from script
Fullscreen	`element.requestFullscreen()` for videos, games, presentations
Web Share	`navigator.share()` opens the device's share sheet
Intersection Observer	Know when an element scrolls into view
Web Workers	Run JavaScript in the background without freezing the page
Server-Sent Events, WebSockets	Live updates from a server

The JavaScript browser APIs lesson demonstrates several of these.

Built-in behaviours worth knowing

<p><label for="sp">Spellchecked field</label> <input id="sp" type="text" placeholder="Try a typo: recieve" spellcheck="true"></p>
<p translate="no">CodeAtlas — this brand name won't be translated by translation tools.</p>
<p>Press <kbd>Alt</kbd>+<kbd>S</kbd> (browser-dependent) to focus: <button type="button" accesskey="s">Save</button></p>
<p hidden="until-found">This hidden paragraph appears if you search the page for "rhubarb".</p>
<p inert>This text and its <a href="#nowhere">link</a> can't be clicked or focused because of <code>inert</code>.</p>

Result

spellcheck and translate control spelling checks and automatic translation.
accesskey sets a keyboard shortcut — use with care, as shortcuts can clash with browsers and screen readers.
hidden="until-found" hides content but lets find-in-page reveal it.
inert makes a whole section unclickable and unfocusable — useful behind custom overlays.

Try it yourself

Edit the shopping list, then drag items to reorder them:

<style>
  #list li { cursor: grab; padding: 4px; }
  #list li.dragging { opacity: .4; }
</style>
<ul id="list">
  <li draggable="true" contenteditable="true">Bread</li>
  <li draggable="true" contenteditable="true">Milk</li>
  <li draggable="true" contenteditable="true">Apples</li>
</ul>
<script>
  let dragged;
  const list = document.getElementById("list");
  list.addEventListener("dragstart", e => { dragged = e.target; e.target.classList.add("dragging"); });
  list.addEventListener("dragend", e => e.target.classList.remove("dragging"));
  list.addEventListener("dragover", e => {
    e.preventDefault();
    const target = e.target.closest("li");
    if (target && target !== dragged) list.insertBefore(dragged, target);
  });
</script>

Result

PreviousCanvas & SVG NextResponsive Design