Low level api

HTML Drag and Drop

let draggedElement = null;
let targetedElement = null;
function handleDragStart(event) {
  event.dataTransfer.setData('text', event.target.parentNode.innerHTML);
}

function handleDrop(event) {
  event.preventDefault();
  const src = event.dataTransfer.getData('text');
  const context = event.target;
  const currentContainer = getParentContainer(context);
  const currentTarget = currentContainer.innerHTML;
  currentContainer.innerHTML = src;
  targetedElement = currentTarget;
}

function allowDrop(event) {
  event.preventDefault();
}

function handleDragEnd(event) {
  event.target.parentNode.innerHTML = targetedElement;
}

function getParentContainer(target) {
  if (target.parentNode.getAttribute('class').includes('row')) {
    return target.parentNode;
  }
  return getParentContainer(target.parentNode);
}