小图标可以自由拖动

<div class="tubiao" @mousedown="startDrag" @touchstart="startDrag">
            <div :class="item.active == true ? 'tttACtive' : 'ttt'" v-for="item in tabLayout" :key="item.value"
                @click="tabLayChange(item)">{{ item.name }}</div>
        </div>


// 重置拖动状态
const isDragging = ref(false);
const dragStartTime = ref(0)

function startDrag(event) {
    event.preventDefault();
    isDragging.value = false;
    dragStartTime.value = Date.now();
    const box = event.target;
    const initialX = event.clientX || event.touches[0].clientX;
    const initialY = event.clientY || event.touches[0].clientY;
    const rect = box.getBoundingClientRect();
    const offsetX = initialX - rect.left;
    const offsetY = initialY - rect.top;

    const onm ouseMove = (moveEvent) => {
         isDragging.value = true;
        const moveX = moveEvent.clientX || moveEvent.touches[0].clientX;
        const moveY = moveEvent.clientY || moveEvent.touches[0].clientY;
        const newX = moveX - offsetX;
        const newY = moveY - offsetY;
        box.style.left = `${newX}px`;
        box.style.top = `${newY}px`;
        box.style.right = 'auto';
        box.style.bottom = 'auto';
    };

    const onm ouseUp = () => {
        const dragEndTime = Date.now();
        document.removeEventListener('mousemove', onm ouseMove);
        document.removeEventListener('mouseup', onm ouseUp);
        document.removeEventListener('touchmove', onm ouseMove);
        document.removeEventListener('touchend', onm ouseUp);

        // 检查拖动时间，如果拖动时间小于200毫秒，则认为是一次点击
        if (!isDragging.value && (dragEndTime - dragStartTime.value < 200)) {
            // open();
        }
    };

    document.addEventListener('mousemove', onm ouseMove);
    document.addEventListener('mouseup', onm ouseUp);
    document.addEventListener('touchmove', onm ouseMove);
    document.addEventListener('touchend', onm ouseUp);
}

.tubiao{
            width: 6rem;
            height: 6.5rem;
            // background: url("@/assets/bigScreen/u399.png") center no-repeat;
            // background-size: 100% 100%;
            background:#7996d4;
            border:1px solid #1ebcd8;
            position: absolute;
            bottom: 5.5625rem;
            right: 1.25rem;
            z-index: 9;
            cursor: pointer;
            touch-action: none;
            color:#fff;
            padding:8px;
            text-align: center;
            /* 禁用默认的触摸事件 */
}