快捷導(dǎo)航

前端實現(xiàn)界面元素拖拽功能的3種方式總結(jié)(親測有效)

更新時間：2025年02月08日 10:04:04 作者：前端白袍

這篇文章主要介紹了前端實現(xiàn)界面元素拖拽功能的3種方式,三種方法分別是純HTML+CSS+JS、Vue模板和Vue全局指令,每種方法都通過監(jiān)聽鼠標(biāo)事件來實現(xiàn)元素的拖動功能,并通過控制閥來確保只有在指定區(qū)域按下鼠標(biāo)時才開始拖動,需要的朋友可以參考下

一、純HTML+CSS+JS實現(xiàn)；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="draggableDialog">
    <div class="dialog-header">彈框標(biāo)題</div>
    <div class="dialog-content">彈框內(nèi)容</div>
</div>
</body>
<style>
  #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;
}
</style>
<script>
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;
});
</script>
</html>

實現(xiàn)原理：使用js事件監(jiān)聽，監(jiān)聽document全局DOM的鼠標(biāo)移動事件，當(dāng)觸發(fā)事件后，目標(biāo)元素將會隨鼠標(biāo)一起偏移(移動)相對應(yīng)的距離；因目標(biāo)元素并非一直需要跟隨鼠標(biāo)移動，于是通過給目標(biāo)元素指定區(qū)域dialogHeader 添加鼠標(biāo)按下事件配合isDragging控制閥，實現(xiàn)只有當(dāng)鼠標(biāo)在指定區(qū)域按下才能實現(xiàn)拖動目標(biāo)元素的效果。

二、VUE模板實現(xiàn)；

<template>
  <div id="draggableDialog" ref="dialog">
    <div class="dialog-header" @mousedown="startDrag($event)">彈框標(biāo)題</div>
    <div class="dialog-content">彈框內(nèi)容</div>
  </div>
</template>
 
<script>
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);
    }
  }
};
</script>
 
<style>
#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;
}
</style>

原理同上；

三、VUE全局指令實現(xiàn)；

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