vue 拖动效果不在组件注册指令

如果你不想在组件中注册指令，你也可以使用 Vue 自定义指令来实现拖动效果。

下面是一个简单的实现示例：

1. 定义一个名为 `v-draggable` 的自定义指令：

Vue.directive('draggable', {
  bind: function (el, binding) {
    let startX, startY, initialMouseX, initialMouseY;
    let draggable = el.querySelector('.draggable');
    draggable.addEventListener('mousedown', (e) => {
      startX = draggable.offsetLeft;
      startY = draggable.offsetTop;
      initialMouseX = e.clientX;
      initialMouseY = e.clientY;
      document.addEventListener('mousemove', mousemove);
      document.addEventListener('mouseup', mouseup);
    });

    function mousemove(e) {
      let dx = e.clientX - initialMouseX;
      let dy = e.clientY - initialMouseY;
      draggable.style.top = startY + dy + 'px';
      draggable.style.left = startX + dx + 'px';
    }

    function mouseup() {
      document.removeEventListener('mousemove', mousemove);
      document.removeEventListener('mouseup', mouseup);
    }
  }
});

2. 在组件模板中使用自定义指令：

<template>
  <div class="container">
    <div class="draggable" v-draggable>Drag me around</div>
  </div>
</template>

这里我们使用 `v-draggable` 自定义指令来绑定拖动事件，当用户按下鼠标左键并拖动时，`mousemove` 事件会触发并计算出鼠标移动的距离，然后通过给 `.draggable` 元素设置 `top` 和 `left` 样式来实现拖动效果。最后，在鼠标抬起时，我们需要移除监听器以防止出现意外情况。

需要注意的是，在使用自定义指令时，需要在 Vue 实例创建之前定义指令。通常我们会在入口文件中定义指令，例如：

import Vue from 'vue';
Vue.directive('draggable', {
  // ...
});
new Vue({
  // ...
});