UNPKG

tdesign-vue-next

Version:
1 lines 6.16 kB
{"version":3,"file":"useDragSort.mjs","sources":["../../../../components/transfer/hooks/useDragSort.ts"],"sourcesContent":["import { ref, ComputedRef, Ref } from 'vue';\nimport type { TransferValue } from '../type';\nimport type { TransferItemOption } from '../types';\nexport default function useDragSort(\n currentValue: Ref<Array<TransferValue>>,\n curPageData: ComputedRef<TransferItemOption[]>,\n handleDataChange: (data: Array<TransferValue>, movedValue: Array<TransferValue>) => void,\n) {\n const draggingIndex = ref(null);\n const dragoverIndex = ref(null);\n const dragoverPos = ref(null);\n\n const onDragStart = (e: DragEvent) => {\n const index = Number((e.target as HTMLElement).dataset.index);\n draggingIndex.value = index;\n };\n\n const onDragOver = (e: DragEvent) => {\n e.preventDefault();\n if (e.currentTarget) {\n const currentElement = e.currentTarget as HTMLElement;\n const index = Number(currentElement.dataset.index);\n const elemHeight = currentElement.offsetHeight;\n const dragY = e.clientY - currentElement.getBoundingClientRect().top;\n const insertAreaPercent = 0.3;\n const insertAreaHeight = elemHeight * insertAreaPercent;\n\n dragoverIndex.value = index;\n\n if (dragoverIndex.value === draggingIndex.value) {\n dragoverPos.value = '';\n return;\n }\n if (dragY < insertAreaHeight) {\n dragoverPos.value = 'top';\n } else if (dragY > elemHeight - insertAreaHeight) {\n dragoverPos.value = 'bottom';\n } else {\n dragoverPos.value = 'center';\n }\n }\n };\n\n const onDragLeave = () => {\n dragoverPos.value = '';\n dragoverIndex.value = null;\n };\n\n const onDragEnd = () => {\n draggingIndex.value = null;\n dragoverIndex.value = null;\n dragoverPos.value = '';\n };\n\n const onDrop = (e: DragEvent) => {\n e.preventDefault();\n const currentDraggingIndex = draggingIndex.value;\n const currentDragoverIndex = dragoverIndex.value;\n\n draggingIndex.value = null;\n dragoverIndex.value = null;\n dragoverPos.value = '';\n if (currentDraggingIndex === currentDragoverIndex) {\n return;\n }\n\n const newData = [...currentValue.value];\n\n const sourceItem = curPageData.value[currentDraggingIndex].value;\n const targetItem = curPageData.value[currentDragoverIndex].value;\n const sourceIndex = newData.indexOf(sourceItem);\n let targetIndex = newData.indexOf(targetItem);\n\n newData.splice(sourceIndex, 1);\n\n if (dragoverPos.value === 'bottom') {\n targetIndex += 1;\n }\n newData.splice(targetIndex, 0, sourceItem);\n handleDataChange?.(newData, [sourceItem, targetItem]);\n };\n\n return {\n onDragStart,\n onDragEnd,\n onDrop,\n onDragOver,\n onDragLeave,\n };\n}\n"],"names":["useDragSort","currentValue","curPageData","handleDataChange","draggingIndex","ref","dragoverIndex","dragoverPos","onDragStart","e","index","Number","target","dataset","value","onDragOver","preventDefault","currentTarget","currentElement","elemHeight","offsetHeight","dragY","clientY","getBoundingClientRect","top","insertAreaPercent","insertAreaHeight","onDragLeave","onDragEnd","onDrop","currentDraggingIndex","currentDragoverIndex","newData","_toConsumableArray","sourceItem","targetItem","sourceIndex","indexOf","targetIndex","splice"],"mappings":"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"}