vue实现放大缩小拖拽功能

下面是详细的讲解“Vue实现放大缩小拖拽功能”的完整攻略。

思路

Vue 实现放大缩小拖拽功能的核心是通过指令绑定（Directive Binding）和虚拟DOM的实时更新来控制元素的样式和位置。

具体实现思路：

在 Vue 中定义一个指令，该指令将会被绑定到元素上面。
在元素中设置样式，并在指令中实现这些样式。
在指令中监听 mousedown，mousemove 和 mouseup 事件，实现拖拽的功能。
通过计算元素的位置和大小，实现缩放的功能。

具体步骤

1. 定义指令

这里我们定义一个 drag 指令，将会绑定到元素上面。

Vue.directive('drag', {
  bind(el, binding, vnode) {
    // 要执行的一些初始化操作
  },
  inserted(el, binding, vnode) {
    // 绑定元素插入父节点时调用
  },
  update(el, binding, vnode, oldVnode) {
    // 如果相关值变化，则执行
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    // 被绑定元素所在模板更新时调用
  },
  unbind(el, binding, vnode) {
    // 组件销毁时
  }
})

2. 实现样式

在元素中设置样式，例如设置一张图片并设置它的宽高、边框和位置。

<template>
  <div class="container">
    <img v-drag src="https://picsum.photos/id/237/200/300" alt="">
  </div>
</template>

<style>
  .container {
    position: relative;
    width: 600px;
    height: 400px;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
  }
  img {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    position: absolute;
    top: 50px;
    left: 50px;
    cursor: move;
  }
</style>

3. 监听事件

在指令中监听 mousedown，mousemove 和 mouseup 事件，实现拖拽的功能。记录鼠标按下时，元素的初始位置和鼠标的初始位置，随后监听鼠标移动事件，计算元素在拖拽过程中的移动距离以及新的位置，并设置在拖拽结束时清除事件监听。

// 鼠标按下时记录元素和鼠标的位置信息
let mouseOffset = {};

// 鼠标按下的事件
function mousedown(e) {
  mouseOffset.x = e.pageX - el.offsetLeft;
  mouseOffset.y = e.pageY - el.offsetTop;
  document.addEventListener('mousemove', mousemove);
  document.addEventListener('mouseup', mouseup);
}

// 鼠标移动的事件
function mousemove(e) {
  el.style.left = e.pageX - mouseOffset.x + 'px';
  el.style.top = e.pageY - mouseOffset.y + 'px';
}

// 鼠标松开的事件
function mouseup(e) {
  document.removeEventListener('mousemove', mousemove);
  document.removeEventListener('mouseup', mouseup);
}

4. 实现缩放

除了可以拖拽元素，我们还可以实现缩放效果。要实现缩放效果，我们可以在元素的四个角上添加 resize 的样式，在 resize 时计算元素的新宽度、高度、left 和 top。在指令中监听 resize 事件。

// 鼠标按下时记录元素、鼠标位置和元素宽、高信息
let resizeInfo = {};

// 鼠标按下的事件
function resizeMousedown(e) {
  resizeInfo.startX = e.pageX;
  resizeInfo.startY = e.pageY;
  resizeInfo.width = el.offsetWidth;
  resizeInfo.height = el.offsetHeight;
  document.addEventListener('mousemove', resizeMousemove);
  document.addEventListener('mouseup', resizeMouseup);
}

// 鼠标移动的事件
function resizeMousemove(e) {
  const diffX = e.pageX - resizeInfo.startX;
  const diffY = e.pageY - resizeInfo.startY;
  const newWidth = resizeInfo.width + diffX;
  const newHeight = resizeInfo.height + diffY;
  el.style.width = newWidth + 'px';
  el.style.height = newHeight + 'px';
}

// 鼠标松开的事件
function resizeMouseup(e) {
  document.removeEventListener('mousemove', resizeMousemove);
  document.removeEventListener('mouseup', resizeMouseup);
}

示例

上面提到了两个功能，拖拽和缩放。以下是两个示例。

示例一：拖拽

在CodePen中查看。

<template>
  <div class="container">
    <img v-drag src="https://picsum.photos/id/237/200/300" alt="">
  </div>
</template>

<style>
  .container {
    position: relative;
    width: 600px;
    height: 400px;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
  }
  img {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    position: absolute;
    top: 50px;
    left: 50px;
    cursor: move;
  }
</style>

<script>
  Vue.directive('drag', {
    bind(el, binding, vnode) {
      let mouseOffset = {};     // 鼠标按下时记录元素和鼠标的位置信息
      el.addEventListener('mousedown', mousedown);

      // 鼠标按下的事件
      function mousedown(e) {
        mouseOffset.x = e.pageX - el.offsetLeft;
        mouseOffset.y = e.pageY - el.offsetTop;
        document.addEventListener('mousemove', mousemove);
        document.addEventListener('mouseup', mouseup);
      }

      // 鼠标移动的事件
      function mousemove(e) {
        el.style.left = e.pageX - mouseOffset.x + 'px';
        el.style.top = e.pageY - mouseOffset.y + 'px';
      }

      // 鼠标松开的事件
      function mouseup(e) {
        document.removeEventListener('mousemove', mousemove);
        document.removeEventListener('mouseup', mouseup);
      }
    }
  })

  new Vue({
    el: '#app',
  })
</script>

示例二：拖拽和缩放