vue.draggable.next实现按钮在区域内任意拖拽移动 vue3

对不起，我之前给出的示例是基于 Vue 2.x 的。对于 Vue 3.x，你可以使用 `@vueuse/draggable` 插件来实现按钮在区域内任意拖拽移动的功能。

首先，确保你已经安装了 `@vueuse/draggable` 插件。

接下来，在你的 Vue 组件中，你可以使用 `v-draggable` 指令来使按钮可拖拽。在按钮元素上添加 `v-draggable` 指令，并指定一个唯一的标识符，以便在拖拽事件中识别该按钮。

例如：

<template>
  <div>
    <div class="drag-area">
      <button v-draggable="buttonId" @drag="handleDrag">Drag me</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useDraggable } from '@vueuse/draggable';

export default {
  setup() {
    const buttonId = ref('myButton');
    const { onDrag } = useDraggable(buttonId);

    const handleDrag = (event) => {
      // 处理拖拽事件
      console.log('Button dragged', event);
    };

    return {
      buttonId,
      handleDrag,
      onDrag
    };
  }
};
</script>

<style scoped>
.drag-area {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}
</style>

在上面的示例中，我们使用了 Vue 3.x 的 Composition API，通过 `setup` 函数来设置我们的组件。

在 `setup` 函数中，我们使用 `ref` 来创建一个响应式的 `buttonId` 变量，并通过 `useDraggable` 函数将其与 `v-draggable` 指令关联起来。我们还通过解构赋值获取了 `onDrag` 方法，用于处理拖拽事件。

在 `handleDrag` 方法中，你可以根据需要处理拖拽事件。例如，更新按钮的位置或执行其他相关操作。

记得在组件中引入和注册 `@vueuse/draggable` 插件：

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import { draggable } from '@vueuse/draggable';

const app = createApp(App);
const router = createRouter({
  history: createWebHistory(),
  routes
});

app.use(router);
app.component('draggable', draggable);
app.mount('#app');

这样，你就可以使用 `@vueuse/draggable` 插件来实现按钮在区域内任意拖拽移动的功能了。