tdesign-vue/lib/tabs/utils/handleDragSort.js

tdesign-vue

/**
 * tdesign v1.14.1
 * (c) 2025 tdesign
 * @license MIT
 */

var traversalTabNavs = function traversalTabNavs(tabNavs, fn) {
  Array.from(tabNavs).filter(function (node) {
    return node instanceof HTMLDivElement && !!node.getAttribute("draggable");
  }).forEach(fn);
};
var handleTarget = function handleTarget(target, tabNavs) {
  var resultTarget;
  traversalTabNavs(tabNavs, function (itemNode) {
    if (target instanceof Node && itemNode.contains(target)) {
      resultTarget = itemNode;
    }
  });
  return resultTarget;
};
var handleDragSort = function handleDragSort(props) {
  var navsWrap = null;
  var dragged = null;
  var enterTargets = [];
  var dragstart = function dragstart(event) {
    var target = event.target;
    if (!(target instanceof HTMLDivElement)) return;
    dragged = target;
    var newStyle = {
      opacity: "0.5"
    };
    Object.assign(target.style, newStyle);
    var dt = event.dataTransfer;
    if (dt) {
      dt.effectAllowed = "copy";
      try {
        dt.setData("text/plain", "");
      } catch (e) {}
    }
  };
  var dragend = function dragend(event) {
    var target = event.target;
    if (!(target instanceof HTMLDivElement)) return;
    var newStyle = {
      opacity: ""
    };
    Object.assign(target.style, newStyle);
  };
  var dragover = function dragover(event) {
    if (!navsWrap) return;
    var target = handleTarget(event.target, navsWrap.children);
    var dt = event.dataTransfer;
    if (dt) {
      dt.dropEffect = target !== null && target !== void 0 && target.draggable ? "copy" : "none";
    }
    if (target !== null && target !== void 0 && target.draggable) {
      event.preventDefault();
    }
  };
  var dragenter = function dragenter(event) {
    if (!navsWrap || !dragged) return;
    var target = handleTarget(event.target, navsWrap.children);
    if (target && target !== dragged && target.draggable) {
      var firstChild = target.firstChild;
      if (firstChild instanceof HTMLElement) {
        var newStyle = {
          outline: "1px dashed #0052d9"
        };
        Object.assign(firstChild.style, newStyle);
      }
      if (!enterTargets.includes(target)) {
        enterTargets.push(target);
      }
    }
  };
  var dragleave = function dragleave(event) {
    var target = event.target;
    if (!(target instanceof HTMLDivElement)) return;
    enterTargets.forEach(function (enterTarget) {
      if (!enterTarget.contains(target)) {
        var firstChild = enterTarget.firstChild;
        if (firstChild instanceof HTMLElement) {
          var newStyle = {
            outline: "none"
          };
          Object.assign(firstChild.style, newStyle);
        }
      }
    });
  };
  var drop = function drop(event) {
    var _props$onDragSort;
    event.preventDefault();
    traversalTabNavs(navsWrap.children, function (tabNav) {
      var firstChild = tabNav.firstChild;
      if (firstChild) {
        firstChild.style.outline = "none";
      }
    });
    if (!navsWrap || !dragged || !props.panels) return;
    var dropTarget = handleTarget(event.target, navsWrap.children);
    if (!dropTarget || dropTarget === dragged || !dropTarget.draggable) return;
    var draggedDOMIndex = Array.from(navsWrap.children).indexOf(dragged);
    var targetDOMIndex = Array.from(navsWrap.children).indexOf(dropTarget);
    if (draggedDOMIndex === -1 || targetDOMIndex === -1) return;
    if (targetDOMIndex > draggedDOMIndex) {
      var nextElement = navsWrap.children[targetDOMIndex + 1];
      if (nextElement) {
        dropTarget = nextElement;
      }
    }
    var isCardTheme = props.theme === "card";
    var getDataIndex = function getDataIndex(domIndex) {
      return isCardTheme ? domIndex : domIndex - 1;
    };
    var currentDataIndex = getDataIndex(draggedDOMIndex);
    var targetDataIndex = getDataIndex(targetDOMIndex);
    if (currentDataIndex < 0 || targetDataIndex < 0 || currentDataIndex >= props.panels.length || targetDataIndex >= props.panels.length) return;
    var dragSortData = {
      currentIndex: currentDataIndex,
      current: props.panels[currentDataIndex].value,
      targetIndex: targetDataIndex,
      target: props.panels[targetDataIndex].value
    };
    (_props$onDragSort = props.onDragSort) === null || _props$onDragSort === void 0 || _props$onDragSort.call(props, dragSortData);
  };
  function setNavsWrap(val) {
    navsWrap = val;
    navsWrap.addEventListener("dragstart", dragstart, false);
    navsWrap.addEventListener("dragend", dragend, false);
    navsWrap.addEventListener("dragover", dragover, false);
    navsWrap.addEventListener("dragenter", dragenter, false);
    document.addEventListener("dragleave", dragleave, false);
    document.addEventListener("mousemove", dragleave, false);
    navsWrap.addEventListener("drop", drop, false);
  }
  var dragSortDestroy = function dragSortDestroy() {
    if (navsWrap) {
      navsWrap.removeEventListener("dragstart", dragstart);
      navsWrap.removeEventListener("dragend", dragend);
      navsWrap.removeEventListener("dragover", dragover);
      navsWrap.removeEventListener("dragenter", dragenter);
      document.removeEventListener("dragleave", dragleave);
      document.removeEventListener("mousemove", dragleave);
      navsWrap.removeEventListener("drop", drop);
    }
  };
  return {
    setNavsWrap: setNavsWrap,
    dragSortDestroy: dragSortDestroy
  };
};

export { handleDragSort as default };
//# sourceMappingURL=handleDragSort.js.map