vuedraggable实现按钮在区域内任意拖拽移动 vue3

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

首先，确保你已经安装了 `vue-draggable-next` 插件。

接下来，在你的 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 { draggable } from 'vue-draggable-next';

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

    return {
      buttonId,
      handleDrag
    };
  },
  components: {
    draggable
  }
};
</script>

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

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

在 `setup` 函数中，我们使用 `ref` 来创建一个响应式的 `buttonId` 变量，并在 `handleDrag` 方法中处理拖拽事件。

在组件的选项中，我们将 `draggable` 组件注册为局部组件。

这样，你就可以使用 `vue-draggable-next` 插件来实现按钮在区域内任意拖拽移动的功能了。记得在组件中引入和注册 `vue-draggable-next` 插件。

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import draggable from 'vue-draggable-next';

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

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