vuedraggable拖动脱离元素

你可以通过使用 vuedraggable 插件来实现拖动元素超出容器的效果。首先，你需要确保已经安装并导入了 vuedraggable 插件。

接下来，你可以在拖动元素的容器上添加一个样式，使其允许拖动元素超出边界。例如，你可以使用 CSS 的 `overflow: visible` 样式来实现这个效果。

示例代码如下：

<template>
  <div class="container">
    <draggable v-model="list" :options="draggableOptions">
      <div v-for="item in list" :key="item.id" class="item">
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      draggableOptions: {
        // 其他配置选项
        // ...
      },
    };
  },
};
</script>

<style>
.container {
  overflow: visible;
}

.item {
  /* 元素样式 */
}
</style>

在上面的示例中，我们将 vuedraggable 插件应用于容器，并使用 `v-for` 渲染了一个列表。通过在容器上添加 `overflow: visible` 样式，允许拖动元素超出容器边界。

当然，你还可以根据自己的需求调整样式和配置选项。希望这能帮助到你！如果还有其他问题，请随时提问。