Сложные интерактивы: drag-and-drop

«Канбан», «менеджер файлов», «редактор» — всё это сложные интерактивы. Разбираем перетаскивание, вставку из буфера и горячие клавиши.

HTML5 Drag and Drop

card.draggable = true;
card.addEventListener("dragstart", (e) =>
  e.dataTransfer.setData("text/id", card.id));
column.addEventListener("dragover", (e) => e.preventDefault());
column.addEventListener("drop", (e) => {
  const id = e.dataTransfer.getData("text/id");
  column.append(document.getElementById(id));
});

Буфер обмена и hotkeys

input.addEventListener("paste", (e) => {
  for (const f of e.clipboardData.files) upload(f);
});

document.addEventListener("keydown", (e) => {
  if (e.key === "s" && (e.metaKey || e.ctrlKey)) e.preventDefault();
});