uview-ultra 4.5.46

package/components/up-dragsort/up-dragsort.uvue

@@ -0,0 +1,821 @@
+<template>
+    <view
+        class="up-dragsort"
+        :class="[
+            direction == 'horizontal' ? 'up-dragsort--horizontal' : '',
+            direction == 'vertical' ? 'up-dragsort--vertical' : '',
+            direction == 'all' ? 'up-dragsort--all' : ''
+        ]"
+        :style="movableAreaStyle"
+    >
+        <view class="up-dragsort-area" :style="movableAreaStyle">
+            <view
+                v-for="(item, index) in typedList"
+                :key="getItemId(item, index)"
+                :id="`up-dragsort-item-${instanceId}-${getItemId(item, index)}`"
+                class="up-dragsort-item"
+                :class="{ 'up-dragsort-item--dragging': dragItemId == getItemId(item, index), 'up-dragsort-item--disabled': !draggable || isItemDisabled(item) }"
+                :style="getItemStyle(item, index)"
+                @touchstart="onItemTouchStart(getItemId(item, index), $event)"
+                @touchend="onTouchEnd"
+                @touchcancel="onTouchEnd"
+                @touchmove="onTouchMove"
+            >
+                <view class="up-dragsort-item-content">
+                    <slot :item="item" :index="getItemIndex(getItemId(item, index))">
+                        {{ getItemLabel(item) }}
+                    </slot>
+                    <view
+                        class="up-dragsort-item__handler"
+                        v-if="hasHandlerSlot()"
+                        data-action="handler"
+                        @touchstart.stop="onHandlerTouchStart(getItemId(item, index), $event)"
+                        @touchmove.stop="onTouchMove"
+                        @touchend.stop="onTouchEnd"
+                        @touchcancel.stop="onTouchEnd"
+                    >
+                        <slot name="handler" :item="item" :index="getItemIndex(getItemId(item, index))"></slot>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="uts">
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, useSlots, watch } from 'vue'
+import { guid, sleep } from '../../libs/function/index.uts'
+
+function createDragList(): Array<UTSJSONObject> {
+    return [] as Array<UTSJSONObject>
+}
+
+function createIdList(): Array<string> {
+    return [] as Array<string>
+}
+
+function createPosition(): UTSJSONObject {
+    const position = {} as UTSJSONObject
+    position['x'] = 0
+    position['y'] = 0
+    return position
+}
+
+function copyObject(item: UTSJSONObject): UTSJSONObject {
+    const copied = {} as UTSJSONObject
+    const keys = UTSJSONObject.keys(item)
+    for (let i = 0; i < keys.length; i++) {
+        copied[keys[i]] = item[keys[i]]
+    }
+    return copied
+}
+
+function copyList(list: Array<UTSJSONObject>): Array<UTSJSONObject> {
+    const copied = [] as Array<UTSJSONObject>
+    for (let i = 0; i < list.length; i++) {
+        copied.push(copyObject(list[i]))
+    }
+    return copied
+}
+
+function normalizeNumber(value: any | null, defaultValue: number = 0): number {
+    if (typeof value === 'number') {
+        return value
+    }
+    if (value == null) {
+        return defaultValue
+    }
+    const parsed = parseFloat(value.toString())
+    return isNaN(parsed) ? defaultValue : parsed
+}
+
+function stringValue(value: any | null): string {
+    return value == null ? '' : value.toString()
+}
+
+function isDirectionValid(value: string): boolean {
+    const directions = ['vertical', 'horizontal', 'all']
+    for (let i = 0; i < directions.length; i++) {
+        if (directions[i] == value) {
+            return true
+        }
+    }
+    return false
+}
+
+defineOptions({
+    styleIsolation: 'app-and-page',
+    name: 'up-dragsort'
+})
+
+const props = defineProps({
+    initialList: {
+        type: Array<UTSJSONObject>,
+        required: true,
+        default(): Array<UTSJSONObject> {
+            return [] as Array<UTSJSONObject>
+        }
+    },
+    draggable: {
+        type: Boolean,
+        default: true
+    },
+    vibrate: {
+        type: Boolean,
+        default: true
+    },
+    direction: {
+        type: String,
+        default: 'vertical',
+        validator(value: string): boolean {
+            return value == 'vertical' || value == 'horizontal' || value == 'all'
+        }
+    },
+    columns: {
+        type: Number,
+        default: 3
+    }
+})
+
+const emit = defineEmits(['drag-end'])
+const instance = getCurrentInstance()!.proxy!
+const slots = useSlots()
+
+const list = ref<Array<UTSJSONObject>>(createDragList())
+const orderIds = ref<Array<string>>(createIdList())
+const instanceId = guid(8)
+const dragItemId = ref('')
+const originDragIndex = ref(-1)
+const targetDragIndex = ref(-1)
+const sortChanged = ref(false)
+const itemHeight = ref(0)
+const itemWidth = ref(0)
+const areaWidth = ref(0)
+const areaHeight = ref(0)
+const areaLeft = ref(0)
+const areaTop = ref(0)
+const currentX = ref(0)
+const currentY = ref(0)
+const touchStartX = ref(0)
+const touchStartY = ref(0)
+const dragStartX = ref(0)
+const dragStartY = ref(0)
+const timer = ref(0)
+
+const DEFAULT_ITEM_HEIGHT = 44
+const DEFAULT_ITEM_WIDTH = 88
+const DEFAULT_AREA_WIDTH = 300
+const HANDLER_TOUCH_WIDTH = 48
+
+const typedList = computed((): Array<UTSJSONObject> => {
+    return list.value as Array<UTSJSONObject>
+})
+
+const getSafeColumns = (): number => {
+    return props.columns > 0 ? props.columns : 1
+}
+
+const getLayoutItemHeight = (): number => {
+    return itemHeight.value > 0 ? itemHeight.value : DEFAULT_ITEM_HEIGHT
+}
+
+const getLayoutItemWidth = (): number => {
+    if (props.direction === 'vertical') {
+        return areaWidth.value > 0 ? areaWidth.value : DEFAULT_AREA_WIDTH
+    }
+    if (props.direction === 'horizontal') {
+        const currentList = typedList.value
+        if (areaWidth.value > 0 && currentList.length > 0) {
+            return areaWidth.value / currentList.length
+        }
+        return itemWidth.value > 0 ? itemWidth.value : DEFAULT_ITEM_WIDTH
+    }
+    if (props.direction === 'all' && areaWidth.value > 0) {
+        return areaWidth.value / getSafeColumns()
+    }
+    return itemWidth.value > 0 ? itemWidth.value : DEFAULT_ITEM_WIDTH
+}
+
+const movableAreaStyle = computed((): UTSJSONObject => {
+    const style = {} as UTSJSONObject
+    const currentList = typedList.value
+    const layoutItemHeight = getLayoutItemHeight()
+    const layoutItemWidth = getLayoutItemWidth()
+    if (props.direction === 'vertical') {
+        style['height'] = `${currentList.length * layoutItemHeight}px`
+        style['width'] = '100%'
+        return style
+    }
+    if (props.direction === 'horizontal') {
+        style['height'] = `${layoutItemHeight}px`
+        style['width'] = '100%'
+        return style
+    }
+    const rows = Math.ceil(currentList.length / getSafeColumns())
+    style['height'] = `${rows * layoutItemHeight}px`
+    style['width'] = '100%'
+    return style
+})
+
+const getItemId = (item: UTSJSONObject, index: number): string => {
+    const itemId = item['id']
+    return itemId != null ? itemId.toString() : `index-${index}`
+}
+
+const getItemIndex = (itemId: string): number => {
+    return orderIds.value.indexOf(itemId)
+}
+
+function getRenderItemIndex(itemId: string): number {
+    const currentList = typedList.value
+    for (let i = 0; i < currentList.length; i++) {
+        if (getItemId(currentList[i], i) == itemId) {
+            return i
+        }
+    }
+    return -1
+}
+
+function findSourceIndexById(source: Array<UTSJSONObject>, itemId: string): number {
+    for (let i = 0; i < source.length; i++) {
+        if (getItemId(source[i], i) == itemId) {
+            return i
+        }
+    }
+    return -1
+}
+
+function getOrderedList(): Array<UTSJSONObject> {
+    const orderedList = [] as Array<UTSJSONObject>
+    const currentList = typedList.value
+    const currentOrderIds = orderIds.value
+    for (let i = 0; i < currentOrderIds.length; i++) {
+        const renderIndex = getRenderItemIndex(currentOrderIds[i])
+        if (renderIndex >= 0 && renderIndex < currentList.length) {
+            orderedList.push(copyObject(currentList[renderIndex]))
+        }
+    }
+    return orderedList
+}
+
+const getItemLabel = (item: UTSJSONObject): string => {
+    return stringValue(item['label'])
+}
+
+const getItemX = (item: UTSJSONObject): number => {
+    return normalizeNumber(item['x'], 0)
+}
+
+const getItemY = (item: UTSJSONObject): number => {
+    return normalizeNumber(item['y'], 0)
+}
+
+const getItemStyle = (item: UTSJSONObject, _index: number): UTSJSONObject => {
+    const style = {} as UTSJSONObject
+    const layoutItemHeight = getLayoutItemHeight()
+    const layoutItemWidth = getLayoutItemWidth()
+    style['height'] = `${layoutItemHeight}px`
+    style['width'] = props.direction === 'vertical' ? '100%' : `${layoutItemWidth}px`
+    style['left'] = `${getItemX(item)}px`
+    style['top'] = `${getItemY(item)}px`
+    return style
+}
+
+const isItemDisabled = (item: UTSJSONObject): boolean => {
+    const draggableValue = item['draggable']
+    return draggableValue != null && draggableValue.toString() == 'false'
+}
+
+const getDetailNumber = (detail: UTSJSONObject, key: string): number => {
+    return normalizeNumber(detail[key], 0)
+}
+
+const buildItemPosition = (item: UTSJSONObject, index: number): UTSJSONObject => {
+    const nextItem = copyObject(item)
+    let x = 0
+    let y = 0
+    const layoutItemHeight = getLayoutItemHeight()
+    const layoutItemWidth = getLayoutItemWidth()
+    if (props.direction === 'horizontal') {
+        x = index * layoutItemWidth
+    } else if (props.direction === 'vertical') {
+        y = index * layoutItemHeight
+    } else {
+        const columns = getSafeColumns()
+        const col = index % columns
+        const row = Math.floor(index / columns)
+        x = col * layoutItemWidth
+        y = row * layoutItemHeight
+    }
+    nextItem['x'] = x
+    nextItem['y'] = y
+    return nextItem
+}
+
+const initList = (): void => {
+    const source = props.initialList as Array<UTSJSONObject>
+    const nextOrderIds = [] as Array<string>
+    for (let i = 0; i < source.length; i++) {
+        nextOrderIds.push(getItemId(source[i], i))
+    }
+
+    const renderIds = [] as Array<string>
+    const currentList = typedList.value
+    for (let i = 0; i < currentList.length; i++) {
+        const itemId = getItemId(currentList[i], i)
+        if (findSourceIndexById(source, itemId) >= 0) {
+            renderIds.push(itemId)
+        }
+    }
+    for (let i = 0; i < nextOrderIds.length; i++) {
+        if (renderIds.indexOf(nextOrderIds[i]) == -1) {
+            renderIds.push(nextOrderIds[i])
+        }
+    }
+
+    orderIds.value = nextOrderIds
+    const nextList = [] as Array<UTSJSONObject>
+    for (let i = 0; i < renderIds.length; i++) {
+        const sourceIndex = findSourceIndexById(source, renderIds[i])
+        const visualIndex = getItemIndex(renderIds[i])
+        if (sourceIndex >= 0 && visualIndex >= 0) {
+            nextList.push(buildItemPosition(source[sourceIndex], visualIndex))
+        }
+    }
+    list.value = nextList
+}
+
+function updatePositions(isDragging: boolean = false): void {
+    const nextList = [] as Array<UTSJSONObject>
+    const currentList = typedList.value
+    for (let i = 0; i < currentList.length; i++) {
+        const currentItem = currentList[i]
+        const itemId = getItemId(currentItem, i)
+        const visualIndex = getItemIndex(itemId)
+        if (isDragging && dragItemId.value == itemId) {
+            nextList.push(copyObject(currentItem))
+        } else if (visualIndex >= 0) {
+            nextList.push(buildItemPosition(currentItem, visualIndex))
+        }
+    }
+    list.value = nextList
+}
+
+function getTargetIndexByPosition(): number {
+    const originIndex = originDragIndex.value
+    if (originIndex < 0 || originIndex >= orderIds.value.length) {
+        return -1
+    }
+    if (props.direction === 'all') {
+        const layoutItemWidth = getLayoutItemWidth()
+        const layoutItemHeight = getLayoutItemHeight()
+        if (layoutItemWidth <= 0 || layoutItemHeight <= 0) {
+            return originIndex
+        }
+        const columns = getSafeColumns()
+        const col = Math.max(0, Math.min(Math.round(currentX.value / layoutItemWidth), columns - 1))
+        const row = Math.max(0, Math.round(currentY.value / layoutItemHeight))
+        return Math.max(0, Math.min(row * columns + col, orderIds.value.length - 1))
+    }
+    if (props.direction === 'horizontal') {
+        const layoutItemWidth = getLayoutItemWidth()
+        if (layoutItemWidth <= 0) {
+            return originIndex
+        }
+        return Math.max(0, Math.min(Math.round(currentX.value / layoutItemWidth), orderIds.value.length - 1))
+    }
+    const layoutItemHeight = getLayoutItemHeight()
+    if (layoutItemHeight <= 0) {
+        return originIndex
+    }
+    return Math.max(0, Math.min(Math.round(currentY.value / layoutItemHeight), orderIds.value.length - 1))
+}
+
+function getPreviewIndex(index: number, fromIndex: number, toIndex: number): number {
+    if (fromIndex < toIndex && index > fromIndex && index <= toIndex) {
+        return index - 1
+    }
+    if (fromIndex > toIndex && index >= toIndex && index < fromIndex) {
+        return index + 1
+    }
+    return index
+}
+
+function updatePreviewPositions(): void {
+    const currentList = copyList(typedList.value)
+    const fromIndex = originDragIndex.value
+    const toIndex = targetDragIndex.value
+    if (fromIndex < 0 || toIndex < 0 || fromIndex >= currentList.length || toIndex >= currentList.length) {
+        return
+    }
+    for (let i = 0; i < currentList.length; i++) {
+        const itemId = getItemId(currentList[i], i)
+        const visualIndex = getItemIndex(itemId)
+        if (itemId == dragItemId.value) {
+            currentList[i]['x'] = currentX.value
+            currentList[i]['y'] = currentY.value
+        } else if (visualIndex >= 0) {
+            const positionedItem = buildItemPosition(currentList[i], getPreviewIndex(visualIndex, fromIndex, toIndex))
+            currentList[i]['x'] = positionedItem['x']
+            currentList[i]['y'] = positionedItem['y']
+        }
+    }
+    list.value = currentList
+}
+
+const calculateItemSize = async (): Promise<NodeInfo | null> => {
+    await sleep(30)
+    return new Promise((resolve) => {
+        uni.createSelectorQuery()
+            .in(instance)
+            .select('.up-dragsort-item-content')
+            .boundingClientRect((res: any) => {
+                const rect = res as NodeInfo | null
+                if (rect != null) {
+                    itemHeight.value = rect.height != null ? rect.height : 40
+                    itemWidth.value = rect.width != null ? rect.width : 80
+                    updatePositions()
+                }
+                resolve(rect)
+            })
+            .exec()
+    })
+}
+
+const calculateAreaSize = async (): Promise<NodeInfo | null> => {
+    await sleep(30)
+    return new Promise((resolve) => {
+        uni.createSelectorQuery()
+            .in(instance)
+            .select('.up-dragsort-area')
+            .boundingClientRect((res: any) => {
+                const rect = res as NodeInfo | null
+                if (rect != null) {
+                    areaWidth.value = rect.width != null ? rect.width : 300
+                    areaHeight.value = rect.height != null ? rect.height : 300
+                    areaLeft.value = rect.left != null ? rect.left : 0
+                    areaTop.value = rect.top != null ? rect.top : 0
+                }
+                resolve(rect)
+            })
+            .exec()
+    })
+}
+
+const hasHandlerSlot = (): boolean => {
+    return slots['handler'] != null || slots['$handler'] != null
+}
+
+const getTouch = (event: UniTouchEvent): UniTouch | null => {
+    if (event.touches.length > 0) {
+        return event.touches[0] as UniTouch
+    }
+    if (event.changedTouches.length > 0) {
+        return event.changedTouches[0] as UniTouch
+    }
+    return null
+}
+
+function isTouchInHandler(itemId: string, event: UniTouchEvent): boolean {
+    const currentList = typedList.value
+    const renderIndex = getRenderItemIndex(itemId)
+    if (renderIndex < 0 || renderIndex >= currentList.length) {
+        return false
+    }
+    const touch = getTouch(event)
+    if (touch == null) {
+        return false
+    }
+    const item = currentList[renderIndex]
+    const localX = touch.pageX - areaLeft.value - getItemX(item)
+    return localX >= 0 && localX <= Math.min(HANDLER_TOUCH_WIDTH, getLayoutItemWidth())
+}
+
+function onTouchStart(itemId: string, e: any): void {
+    if (!props.draggable) {
+        return
+    }
+    const currentList = typedList.value
+    const renderIndex = getRenderItemIndex(itemId)
+    const visualIndex = getItemIndex(itemId)
+    if (renderIndex < 0 || renderIndex >= currentList.length || visualIndex < 0 || isItemDisabled(currentList[renderIndex])) {
+        return
+    }
+    const event = e as UniTouchEvent
+    const touch = getTouch(event)
+    if (touch == null) {
+        return
+    }
+    if (timer.value > 0) {
+        clearTimeout(timer.value)
+        timer.value = 0
+    }
+    sortChanged.value = false
+    dragItemId.value = itemId
+    originDragIndex.value = visualIndex
+    targetDragIndex.value = visualIndex
+    touchStartX.value = touch.pageX
+    touchStartY.value = touch.pageY
+    dragStartX.value = getItemX(currentList[renderIndex])
+    dragStartY.value = getItemY(currentList[renderIndex])
+    currentX.value = dragStartX.value
+    currentY.value = dragStartY.value
+    event.stopPropagation()
+}
+
+function onHandlerTouchStart(itemId: string, event: any): void {
+    onTouchStart(itemId, event)
+}
+
+function onItemTouchStart(itemId: string, event: any): void {
+    if (hasHandlerSlot()) {
+        const touchEvent = event as UniTouchEvent
+        if (isTouchInHandler(itemId, touchEvent)) {
+            onTouchStart(itemId, event)
+        }
+        return
+    }
+    onTouchStart(itemId, event)
+}
+
+function reorderItems(fromIndex: number, toIndex: number): void {
+    const currentOrderIds = [] as Array<string>
+    const sourceOrderIds = orderIds.value
+    for (let i = 0; i < sourceOrderIds.length; i++) {
+        currentOrderIds.push(sourceOrderIds[i])
+    }
+    if (fromIndex < 0 || toIndex < 0 || fromIndex >= currentOrderIds.length || toIndex >= currentOrderIds.length || fromIndex == toIndex) {
+        return
+    }
+    const movedItemIds = currentOrderIds.splice(fromIndex, 1) as Array<string>
+    if (movedItemIds.length == 0) {
+        return
+    }
+    currentOrderIds.splice(toIndex, 0, movedItemIds[0])
+    orderIds.value = currentOrderIds
+    sortChanged.value = true
+    updatePositions(true)
+}
+
+function handleAllModeChange(index: number): void {
+    const targetIndex = getTargetIndexByPosition()
+    if (targetIndex < 0) {
+        return
+    }
+    targetDragIndex.value = targetIndex
+    sortChanged.value = targetIndex != index
+    updatePreviewPositions()
+}
+
+function updateSortByPosition(index: number): void {
+    if (props.direction === 'all') {
+        handleAllModeChange(index)
+        return
+    }
+    const targetIndex = getTargetIndexByPosition()
+    if (targetIndex < 0) {
+        return
+    }
+    targetDragIndex.value = targetIndex
+    sortChanged.value = targetIndex != index
+    updatePreviewPositions()
+}
+
+function onTouchMove(e: any): void {
+    if (dragItemId.value == '' || originDragIndex.value == -1) {
+        return
+    }
+    const event = e as UniTouchEvent
+    const touch = getTouch(event)
+    if (touch == null) {
+        return
+    }
+    event.stopPropagation()
+    event.preventDefault()
+
+    let nextX = dragStartX.value + touch.pageX - touchStartX.value
+    let nextY = dragStartY.value + touch.pageY - touchStartY.value
+    if (props.direction === 'vertical') {
+        nextX = 0
+    } else if (props.direction === 'horizontal') {
+        nextY = 0
+    }
+
+    currentX.value = nextX
+    currentY.value = nextY
+
+    updateSortByPosition(originDragIndex.value)
+}
+
+function onChange(itemId: string, event: any): void {
+    const customEvent = event as UniCustomEvent<UTSJSONObject>
+    if (customEvent.detail == null || stringValue(customEvent.detail['source']) != 'touch') {
+        return
+    }
+    currentX.value = getDetailNumber(customEvent.detail, 'x')
+    currentY.value = getDetailNumber(customEvent.detail, 'y')
+    const index = getItemIndex(itemId)
+    if (index >= 0) {
+        updateSortByPosition(index)
+    }
+}
+
+function resetDragTracking(): void {
+    originDragIndex.value = -1
+    targetDragIndex.value = -1
+}
+
+function onTouchEnd(e: any): void {
+    if (dragItemId.value == '' || originDragIndex.value == -1) {
+        return
+    }
+    const event = e as UniTouchEvent
+    event.stopPropagation()
+    event.preventDefault()
+    const currentList = copyList(typedList.value)
+    const fromIndex = originDragIndex.value
+    const toIndex = targetDragIndex.value >= 0 ? targetDragIndex.value : fromIndex
+    const renderIndex = getRenderItemIndex(dragItemId.value)
+    if (fromIndex < 0 || toIndex < 0 || fromIndex >= orderIds.value.length || toIndex >= orderIds.value.length || renderIndex < 0 || renderIndex >= currentList.length) {
+        dragItemId.value = ''
+        resetDragTracking()
+        return
+    }
+    const dragItem = currentList[renderIndex]
+    if (props.direction === 'horizontal') {
+        dragItem['x'] = currentX.value + 0.001
+    } else {
+        dragItem['x'] = currentX.value + 0.001
+        dragItem['y'] = currentY.value + 0.001
+    }
+    list.value = currentList
+    if (fromIndex != toIndex) {
+        reorderItems(fromIndex, toIndex)
+    } else {
+        sortChanged.value = false
+    }
+    resetDragTracking()
+    sleep(50).then(() => {
+        updatePositions()
+        if (sortChanged.value) {
+            emit('drag-end', getOrderedList())
+            sortChanged.value = false
+        }
+        timer.value = setTimeout(() => {
+            dragItemId.value = ''
+            timer.value = 0
+        }, 600)
+    })
+}
+
+onMounted(() => {
+    nextTick(() => {
+        initList()
+        calculateAreaSize().then(() => {
+            updatePositions()
+            calculateItemSize()
+        })
+    })
+})
+
+onBeforeUnmount(() => {
+    if (timer.value > 0) {
+        clearTimeout(timer.value)
+        timer.value = 0
+    }
+})
+
+watch((): Array<UTSJSONObject> => props.initialList as Array<UTSJSONObject>, () => {
+    nextTick(() => {
+        initList()
+        calculateAreaSize().then(() => {
+            updatePositions()
+            calculateItemSize()
+        })
+    })
+})
+
+watch((): string => props.direction, () => {
+    nextTick(() => {
+        initList()
+        calculateAreaSize().then(() => {
+            updatePositions()
+            calculateItemSize()
+        })
+    })
+})
+
+watch((): number => props.columns, () => {
+    if (props.direction === 'all') {
+        nextTick(() => {
+            initList()
+            updatePositions()
+        })
+    }
+})
+
+defineExpose({
+    list,
+    orderIds,
+    instanceId,
+    dragItemId,
+    originDragIndex,
+    targetDragIndex,
+    sortChanged,
+    itemHeight,
+    itemWidth,
+    areaWidth,
+    areaHeight,
+    areaLeft,
+    areaTop,
+    currentX,
+    currentY,
+    touchStartX,
+    touchStartY,
+    dragStartX,
+    dragStartY,
+    timer,
+    movableAreaStyle,
+    typedList,
+    getItemId,
+    getItemIndex,
+    getRenderItemIndex,
+    findSourceIndexById,
+    getOrderedList,
+    getItemLabel,
+    getItemX,
+    getItemY,
+    getItemStyle,
+    isItemDisabled,
+    getDetailNumber,
+    buildItemPosition,
+    initList,
+    calculateItemSize,
+    calculateAreaSize,
+    updatePositions,
+    getTargetIndexByPosition,
+    getPreviewIndex,
+    updatePreviewPositions,
+    hasHandlerSlot,
+    getTouch,
+    isTouchInHandler,
+    onHandlerTouchStart,
+    onItemTouchStart,
+    onTouchStart,
+    onTouchMove,
+    onChange,
+    handleAllModeChange,
+    updateSortByPosition,
+    resetDragTracking,
+    reorderItems,
+    onTouchEnd
+})
+</script>
+
+<style scoped lang="scss">
+.up-dragsort {
+    width: 100%;
+    height: auto;
+}
+
+.up-dragsort-area {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.up-dragsort-item {
+    position: absolute;
+    width: 100%;
+    height: auto;
+    transition: left 0.2s ease, top 0.2s ease, box-shadow 0.45s ease-out;
+}
+
+.up-dragsort-item--dragging {
+    z-index: 1000;
+    transition: none;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+}
+
+.up-dragsort-item-content {
+    position: relative;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.up-dragsort-item__handler {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 48px;
+    height: 100%;
+    min-width: 44px;
+    min-height: 44px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+}
+</style>