tdesign-vue-next/es/hooks/useDragSort.mjs.map

TDesign Component for vue-next

{"version":3,"file":"useDragSort.mjs","sources":["../../../components/hooks/useDragSort.tsx"],"sourcesContent":["import { onUnmounted } from 'vue';\n\nconst traversalTabNavs = (tabNavs: HTMLCollection, fn: { (itemNode: any): void; (tabNav: HTMLDivElement): void }) => {\n  for (const itemNode of tabNavs) {\n    if (itemNode.getAttribute('draggable')) {\n      fn(itemNode);\n    }\n  }\n};\n\nconst handleTarget = (target: EventTarget, tabNavs: HTMLCollection): any => {\n  let resultTarget;\n  traversalTabNavs(tabNavs, (itemNode) => {\n    if (itemNode.contains(target)) {\n      resultTarget = itemNode;\n    }\n  });\n  return resultTarget;\n};\n\nexport default function useDragSort(props: any) {\n  let navsWrap: HTMLDivElement = null;\n\n  // 获取当前正在拖动的tabNav节点\n  let dragged: HTMLDivElement;\n  const enterTargets: HTMLDivElement[] = [];\n\n  const dragstart = (event: DragEvent) => {\n    const target = event.target as HTMLDivElement;\n    // const { target } = event;\n    // 保存拖动元素的引用(ref.)\n    dragged = target;\n    // 使其半透明\n    target.style.opacity = '0.5';\n  };\n  const dragend = (event: DragEvent) => {\n    // 重置透明度\n    (event.target as HTMLDivElement).style.opacity = '';\n  };\n  /* 放置目标元素时触发事件 */\n  const dragover = (event: DragEvent) => {\n    // 阻止默认动作以启用drop\n    event.preventDefault();\n  };\n  // 当可拖动的元素进入可放置的目标时\n  const dragenter = (event: DragEvent) => {\n    // 高亮目标节点\n    const target = handleTarget(event.target, navsWrap.children);\n    if (target && target !== dragged && target.draggable) {\n      target.firstChild.style.outline = '1px dashed #0052d9';\n      // 进入的节点全部记录下来\n      if (!enterTargets.includes(target)) {\n        enterTargets.push(target);\n      }\n    }\n  };\n  // 当拖动元素离开可放置目标节点\n  const dragleave = (event: DragEvent) => {\n    const target = event.target as HTMLDivElement;\n    // 重置其边框\n    // const { target } = event;\n    for (const enterTarget of enterTargets) {\n      // 目标不在需要放入的节点内，则重置边框\n      if (!enterTarget.contains(target)) {\n        // 记录过的节点全部重置边框\n        (enterTarget.firstChild as HTMLDivElement).style.outline = 'none';\n      }\n    }\n  };\n  const drop = (event: DragEvent) => {\n    // 阻止默认动作（如打开一些元素的链接）\n    event.preventDefault();\n\n    traversalTabNavs(navsWrap.children, (tabNav) => {\n      tabNav.firstChild.style.outline = 'none';\n    });\n    // 将拖动的元素到所选择的放置目标节点中\n    let target = handleTarget(event.target, navsWrap.children);\n    if (target && target.parentNode !== dragged && target.draggable) {\n      // 获取拖拽元素index\n      const dragIndex = [].indexOf.call(navsWrap.children, dragged);\n      // 获取放入元素index\n      const targetIndex = [].indexOf.call(navsWrap.children, target);\n      if (targetIndex > dragIndex) {\n        target = navsWrap.children[targetIndex + 1];\n      }\n\n      // 当props.theme === \"normal\" 会多出一个指示条为第一个dom节点，所以需要减1\n      const currentIndex = props.theme === 'card' ? dragIndex : dragIndex - 1;\n      const endIndex = props.theme === 'card' ? targetIndex : targetIndex - 1;\n      props.onDragSort?.({\n        currentIndex,\n        current: props.panels[currentIndex].value,\n        targetIndex: endIndex,\n        target: props.panels[endIndex].value,\n      });\n    }\n  };\n  function setNavsWrap(val: HTMLDivElement) {\n    navsWrap = val;\n    navsWrap.addEventListener('dragstart', dragstart, false);\n    navsWrap.addEventListener('dragend', dragend, false);\n    navsWrap.addEventListener('dragover', dragover, false);\n    navsWrap.addEventListener('dragenter', dragenter, false);\n    document.addEventListener('dragleave', dragleave, false);\n    document.addEventListener('mousemove', dragleave, false);\n    navsWrap.addEventListener('drop', drop, false);\n  }\n\n  onUnmounted(() => {\n    navsWrap.removeEventListener('dragstart', dragstart);\n    navsWrap.removeEventListener('dragend', dragend);\n    navsWrap.removeEventListener('dragover', dragover);\n    navsWrap.removeEventListener('dragenter', dragenter);\n    document.removeEventListener('dragleave', dragleave);\n    document.removeEventListener('mousemove', dragleave);\n    navsWrap.removeEventListener('drop', drop);\n  });\n  return { setNavsWrap };\n}\n"],"names":["traversalTabNavs","tabNavs","fn","_iterator","_createForOfIteratorHelper","_step","s","n","done","itemNode","getAttribute","err","e","f","handleTarget","target","resultTarget","contains","useDragSort","props","navsWrap","dragged","enterTargets","dragstart","event","style","opacity","dragend","dragover","preventDefault","dragenter","children","draggable","firstChild","outline","includes","push","dragleave","_i","_enterTargets","length","enterTarget","drop","tabNav","parentNode","_props$onDragSort","dragIndex","indexOf","call","targetIndex","currentIndex","theme","endIndex","onDragSort","current","panels","value","setNavsWrap","val","addEventListener","document","onUnmounted","removeEventListener"],"mappings":"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"}