前端实现界面元素拖拽功能的3种方式总结(亲测有效)

目录

• 一、纯HTML+CSS+JS实现；
• 二、VUE模板实现；
• 三、VUE全局指令实现；
• 总结

一、纯HTML+CSS+JS实现；

  
  
  



  

    
弹框标题
    
弹框内容

实现原理：使用js事件监听，监听document全局DOM的鼠标移动事件，当触发事件后，目标元素将会随鼠标一起偏移(移动)相对应的距离；因目标元素并非一直需要跟随鼠标移动，于是通过给目标元素指定区域dialogHeader 添加鼠标按下事件配合isDragging控制阀，实现只有当鼠标在指定区域按下才能实现拖动目标元素的效果。

二、VUE模板实现；

原理同上；

三、VUE全局指令实现；

Vue.directive('drag', {
    bind(el) {
        el.onmousedown = function(e) {
            let disX = e.clientX - el.offsetLeft;
            let disY = e.clientY - el.offsetTop;
            document.onmousemove = function(e) {
                let left = e.clientX - disX;
                let top = e.clientY - disY;
                if (left < 0) left = 0;
                if (top < 0) top = 0;
                if (left > document.documentElement.clientWidth - el.offsetWidth) left = document.documentElement.clientWidth - el.offsetWidth;
                if (top > document.documentElement.clientHeight - el.offsetHeight) top = document.documentElement.clientHeight - el.offsetHeight;
                el.style.left = left + 'px';
                el.style.top = top + 'px';
            };
            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    }
});

总结

到此这篇关于前端实现界面元素拖拽功能的3种方式的文章就介绍到这了,更多相关前端实现界面元素拖拽内容请搜索科站长以前的文章或继续浏览下面的相关文章希望大家以后多多支持科站长！