typestar

Dragging things in HTML

One attribute makes an element draggable; the rest is three events.

<ul id="backlog">
  <li draggable="true" data-id="1">Write the parser</li>
  <li draggable="true" data-id="2">Draw the map</li>
</ul>

<ul id="doing" class="dropzone"></ul>

<script>
  document.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text/plain', event.target.dataset.id);
  });
  const zone = document.getElementById('doing');
  zone.addEventListener('dragover', (event) => event.preventDefault());
  zone.addEventListener('drop', (event) => {
    event.preventDefault();
    console.log('dropped', event.dataTransfer.getData('text/plain'));
  });
</script>

How it works

  1. draggable="true" starts it; links and images are draggable already.
  2. The drop target must cancel dragover, or the drop never fires.
  3. The payload travels in dataTransfer, keyed by a MIME type.

Keywords and builtins used here

The run, in numbers

Lines
18
Characters to type
565
Tokens
152
Three-star pace
80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 114 seconds.

Type this snippet

Step 2 of 2 in Direct manipulation, step 9 of 13 in Interactive HTML.

← Previous Next →