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

目录

• 前端实现界面元素拖拽功能的三种方式(亲测有效)
• • 一、纯HTML+CSS+JS实现；
  • 二、VUE模板实现；
  • 三、VUE全局指令实现；

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

    一、纯HTML+CSS+JS实现；

    
    
      
      
      Document
    
    
      
    
        
    弹框标题
        
    弹框内容
    
    
    
      #draggableDialog {
        position: absolute;
        width: 300px;
        height: 200px;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px;
    }
    .dialog-header {
        cursor: move;
        background-color: #f0f0f0;
        padding: 5px;
    }
    
    
    const dialog = document.getElementById('draggableDialog');
    const dialogHeader = dialog.querySelector('.dialog-header');
    let isDragging = false;
    let offsetX, offsetY;
    dialogHeader.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - dialog.offsetLeft;
        offsetY = e.clientY - dialog.offsetTop;
    });
    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            dialog.style.left = e.clientX - offsetX + 'px';
            dialog.style.top = e.clientY - offsetY + 'px';
        }
    });
    document.addEventListener('mouseup', () => {
        isDragging = false;
    });
    
    
    

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

    二、VUE模板实现；

      
    
        
    弹框标题
        
    弹框内容
      
    
     
    
    export default {
      data() {
        return {
          isDragging: false,
          offsetX: 0,
          offsetY: 0
        };
      },
      methods: {
        startDrag(event) {
          this.isDragging = true;
          this.offsetX = event.clientX - this.$refs.dialog.offsetLeft;
          this.offsetY = event.clientY - this.$refs.dialog.offsetTop;
          document.addEventListener('mousemove', this.drag);
          document.addEventListener('mouseup', this.stopDrag);
        },
        drag(event) {
          if (this.isDragging) {
            this.$refs.dialog.style.left = event.clientX - this.offsetX + 'px';
            this.$refs.dialog.style.top = event.clientY - this.offsetY + 'px';
          }
        },
        stopDrag() {
          this.isDragging = false;
          document.removeEventListener('mousemove', this.drag);
          document.removeEventListener('mouseup', this.stopDrag);
        }
      }
    };
    
     
    
    #draggableDialog {
      position: absolute;
      width: 300px;
      height: 200px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;
    }
     
    .dialog-header {
      cursor: move;
      background-color: #f0f0f0;
      padding: 5px;
    }
    
    

    原理同上；

    三、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  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;
                };
            };
        }
    });