博客

// 拖拽自定义指令添加
Vue.directive('drag', {
    bind(el){
        let disX = 0;
        let disY = 0;
        let isDragStart = false;
        
        el.addEventListener('mousedown', e => {
            disX = e.clientX - el.offsetLeft;
            disY = e.clientY - el.offsetTop;
            isDragStart = true;
            
            e.preventDefault();
        });
        
        document.addEventListener('mousemove', e => {
            if(isDragStart) {
                let x = e.clientX - disX;
                let y = e.clientY - disY;
                
                el.style.left = x + 'px';
                el.style.top = y + 'px';
            }
        });
        
        document.addEventListener('mouseup', e => {
            isDragStart = false;
        });
    }
});