Arrastrar cosas en HTML

Un atributo vuelve arrastrable un elemento; el resto son tres eventos.

<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>

Cómo funciona

draggable="true" lo inicia; enlaces e imágenes ya son arrastrables.
El destino debe cancelar dragover, o el drop nunca dispara.
La carga viaja en dataTransfer, indexada por tipo MIME.

Palabras clave y builtins usados aquí

const
document

El intento, en números

Líneas: 18
Caracteres a escribir: 565
Tokens: 152
Ritmo de tres estrellas: 80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 114 segundos.

Escribe este fragmento

Paso 2 de 2 en Manipulación directa; paso 9 de 13 en HTML interactivo.

← Anterior Siguiente →