Ant Design VueUI框架model框拖拽

105 阅读1分钟

a-model模态框拖拽功能,用的话直接引入就行,在网上找了一堆也不好使

    export default function drag(){
        nextTick(() => {
            var draggable = document.getElementsByClassName('ant-modal-content')[0];
            function handleMouseDown(event) {
                var offsetX = event.clientX - draggable.offsetLeft;
                var offsetY = event.clientY - draggable.offsetTop;
                function handleMouseMove(event) {
                    draggable.style.left = (event.clientX - offsetX) + 'px';
                    draggable.style.top = (event.clientY - offsetY) + 'px';
                }
                function handleMouseUp(event) {
                    document.removeEventListener('mousemove', handleMouseMove);
                    document.removeEventListener('mouseup', handleMouseUp);
                }
                document.addEventListener('mousemove', handleMouseMove);
                document.addEventListener('mouseup', handleMouseUp);
            }
            if(draggable){
                draggable.addEventListener('mousedown', handleMouseDown);
            }
        });
    }