element-plus/es/components/input-tag/src/composables/use-drag-tag.mjs.map

A Component Library for Vue 3

{"version":3,"file":"use-drag-tag.mjs","sources":["../../../../../../../packages/components/input-tag/src/composables/use-drag-tag.ts"],"sourcesContent":["import { ref, shallowRef } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { getStyle, isUndefined, setStyle } from '@element-plus/utils'\n\nimport type { ShallowRef } from 'vue'\n\ntype DropType = 'before' | 'after'\n\ninterface UseDragTagOptions {\n  wrapperRef: ShallowRef<HTMLElement | undefined>\n  handleDragged: (\n    draggingIndex: number,\n    dropIndex: number,\n    type: DropType\n  ) => void\n  afterDragged?: () => void\n}\n\nexport function useDragTag({\n  wrapperRef,\n  handleDragged,\n  afterDragged,\n}: UseDragTagOptions) {\n  const ns = useNamespace('input-tag')\n  const dropIndicatorRef = shallowRef<HTMLElement>()\n  const showDropIndicator = ref(false)\n\n  let draggingIndex: number | undefined\n  let draggingTag: HTMLElement | null\n  let dropIndex: number | undefined\n  let dropType: DropType | undefined\n\n  function getTagClassName(index: number) {\n    return `.${ns.e('inner')} .${ns.namespace.value}-tag:nth-child(${\n      index + 1\n    })`\n  }\n\n  function handleDragStart(event: DragEvent, index: number) {\n    draggingIndex = index\n    draggingTag = wrapperRef.value!.querySelector<HTMLElement>(\n      getTagClassName(index)\n    )\n\n    if (draggingTag) {\n      draggingTag.style.opacity = '0.5'\n    }\n    event.dataTransfer!.effectAllowed = 'move'\n  }\n\n  function handleDragOver(event: DragEvent, index: number) {\n    dropIndex = index\n    event.preventDefault()\n    event.dataTransfer!.dropEffect = 'move'\n\n    if (isUndefined(draggingIndex) || draggingIndex === index) {\n      showDropIndicator.value = false\n      return\n    }\n\n    const dropPosition = wrapperRef\n      .value!.querySelector<HTMLElement>(getTagClassName(index))!\n      .getBoundingClientRect()\n    const dropPrev = !(draggingIndex + 1 === index)\n    const dropNext = !(draggingIndex - 1 === index)\n    const distance = event.clientX - dropPosition.left\n    const prevPercent = dropPrev ? (dropNext ? 0.5 : 1) : -1\n    const nextPercent = dropNext ? (dropPrev ? 0.5 : 0) : 1\n\n    if (distance <= dropPosition.width * prevPercent) {\n      dropType = 'before'\n    } else if (distance > dropPosition.width * nextPercent) {\n      dropType = 'after'\n    } else {\n      dropType = undefined\n    }\n\n    const innerEl = wrapperRef.value!.querySelector<HTMLElement>(\n      `.${ns.e('inner')}`\n    )!\n    const innerPosition = innerEl.getBoundingClientRect()\n    const gap = Number.parseFloat(getStyle(innerEl, 'gap')) / 2\n\n    const indicatorTop = dropPosition.top - innerPosition.top\n    let indicatorLeft = -9999\n\n    if (dropType === 'before') {\n      indicatorLeft = Math.max(\n        dropPosition.left - innerPosition.left - gap,\n        Math.floor(-gap / 2)\n      )\n    } else if (dropType === 'after') {\n      const left = dropPosition.right - innerPosition.left\n      indicatorLeft =\n        left + (innerPosition.width === left ? Math.floor(gap / 2) : gap)\n    }\n\n    setStyle(dropIndicatorRef.value!, {\n      top: `${indicatorTop}px`,\n      left: `${indicatorLeft}px`,\n    })\n    showDropIndicator.value = !!dropType\n  }\n\n  function handleDragEnd(event: DragEvent) {\n    event.preventDefault()\n\n    if (draggingTag) {\n      draggingTag.style.opacity = ''\n    }\n\n    if (\n      dropType &&\n      !isUndefined(draggingIndex) &&\n      !isUndefined(dropIndex) &&\n      draggingIndex !== dropIndex\n    ) {\n      handleDragged(draggingIndex, dropIndex, dropType)\n    }\n\n    showDropIndicator.value = false\n    draggingIndex = undefined\n    draggingTag = null\n    dropIndex = undefined\n    dropType = undefined\n    afterDragged?.()\n  }\n\n  return {\n    dropIndicatorRef,\n    showDropIndicator,\n    handleDragStart,\n    handleDragOver,\n    handleDragEnd,\n  }\n}\n"],"names":[],"mappings":"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"}