拖拽功能实现 TS

需求：点击表单顶部区域，拖动整个表单。

封装的方法：

export const useMove = (el: any) => {
    el.style.position = 'fixed';
    let isDragging = false;
    let offsetX: number, offsetY: number;

    if (!navigator.userAgent.match(/AppleWebKit.*Mobile.*/) && el) {
        el.addEventListener('mousedown', (event: any) => {
            if (event.button === 0 && isTopClicked(event, el)) {
                isDragging = true;
                const lexObj: any = getComputedStyle(el);
                offsetX = event.pageX - el.offsetLeft + parseInt(lexObj['margin-left']);
                offsetY = event.pageY - el.offsetTop + parseInt(lexObj['margin-right']);

                document.addEventListener('mousemove',  event.pageX - offsetX;
            let y = event.pageY - offsetY;
            const maxW = document.documentElement.clientWidth - el.offsetWidth;
            const maxH = document.documentElement.clientHeight - el.offsetHeight;
            x = Math.min(Math.max(x, 0), maxW);
            y = Math.min(Math.max(y, 0), maxH);
            el.style.left = x + 'px';
            el.style.top = y + 'px';
        }
    }

    function  false;
        document.removeEventListener('mousemove',  el.getBoundingClientRect().top + 50;
    }
}; 

使用：

<div id="dragAlarm" class="prompt_box from_box pa">
    ......
</div>

import {onMounted, reactive, ref,toRefs} from 'vue'

onMounted(() => {
  let dragAlarm = document.getElementById('dragAlarm')
  useMove(dragAlarm)
})

说明：

        useMove方法接收一个参数el,表示要操作的元素。函数的主要功能是实现拖拽功能，允许用户通过按住鼠标左键并移动鼠标来拖动页面上的元素。

        函数首先设置元素的样式为position: fixed,然后定义了一些变量，如isDragging用于标记是否正在拖拽，offsetX和offsetY用于计算元素的新位置。

        接下来，函数检查当前浏览器是否为移动设备，如果不是移动设备且元素存在，则为元素添加mousedown事件监听器。当按下鼠标按钮时，如果满足条件(即按下的是鼠标左键并且是顶部点击),则将isDragging设置为true,并计算元素的新位置。

        然后，函数为文档添加mousemove事件监听器，在事件处理函数中更新元素的位置。同时，还定义了一个名为false的函数，用于在不需要拖拽时移除事件监听器。