当前位置：首页 > news >正文

vue中实现元素在界面中自由拖动

news 来源：原创 2025/5/20 10:36:09

这是一个使用 Vue 2 实现可拖动 div 的示例。

<!DOCTYPE html>
<html>
<head>
  <title>Vue 2 可拖动 Div</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    #draggable-div {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: #4CAF50;
      color: white;
      text-align: center;
      line-height: 200px;
      cursor: move;
      user-select: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <div 
      id="draggable-div"
      @mousedown="startDrag"
      :style="{ left: `${posX}px`, top: `${posY}px` }"
    >
      拖动我
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        posX: 100,
        posY: 100,
        isDragging: false,
        offsetX: 0,
        offsetY: 0
      },
      methods: {
        startDrag(event) {
          this.isDragging = true;
          // 计算鼠标点击位置与 div 左上角的偏移
          this.offsetX = event.clientX - this.posX;
          this.offsetY = event.clientY - this.posY;
          
          // 添加全局事件监听
          document.addEventListener('mousemove', this.onDrag);
          document.addEventListener('mouseup', this.stopDrag);
        },
        onDrag(event) {
          if (this.isDragging) {
            // 更新 div 位置
            this.posX = event.clientX - this.offsetX;
            this.posY = event.clientY - this.offsetY;
          }
        },
        stopDrag() {
          this.isDragging = false;
          
          // 移除全局事件监听
          document.removeEventListener('mousemove', this.onDrag);
          document.removeEventListener('mouseup', this.stopDrag);
        }
      }
    });
  </script>
</body>
</html>