dndtabs.mod.js

if(!window.dndtabs)
  (function(containerQuery, childrenQuery) {
    let dragging;
    const container = document.querySelector(containerQuery);

    container.addEventListener('dragstart', e => {
      if(!e.target.matches(childrenQuery)) return;
      const { dataTransfer, target } = e;
      dataTransfer.clearData();
      dataTransfer.setData('application/x-tab-data', target.outerHTML);
      dataTransfer.effectAllowed = 'move';
      dragging = target;
      dragging.style.opacity = 0.5;
    }, true);

    container.addEventListener('dragenter', e => {
      if(!e.target.matches(childrenQuery)) return;
      interceptEvent(e);
      const { dataTransfer, target } = e;
      if(dragging && !target.isEqualNode(dragging)) {
        dataTransfer.dropEffect = 'move';
        const isNext = target.isEqualNode(dragging.nextSibling);
        container.removeChild(dragging);
        container.insertBefore(dragging, isNext ? target.nextSibling : target);
      } else {
        dataTransfer.dropEffect = 'none';
      }
    }, true);

    container.addEventListener('dragover', e => {
      if(!e.target.matches(childrenQuery)) return;
      interceptEvent(e);
      e.dataTransfer.dropEffect = dragging ? 'move' : 'none';
    }, true);

    container.addEventListener('dragend', e => {
      interceptEvent(e);
      if(dragging) {
        dragging.style.opacity = 1;
        dragging = undefined;
      }
    }, true);

    container.addEventListener('drop', e => {
      interceptEvent(e);
      if(dragging) e.dataTransfer.clearData();
    }, true);
    
    container.querySelectorAll(childrenQuery).forEach(registerElement);
    
    window.addEventListener('newtab', e => {
      if(e.detail.tabElement)
        registerElement(e.detail.tabElement);
    });

    function interceptEvent(e) {
      e.preventDefault();
      e.stopPropagation();
    }

    function registerElement(element) {
      element.draggable = true;
    }

    window.dndtabs = true;
  })('.flex', 'a.item');