vue.draggable 点击置顶

`vue.draggable` 是 Vue.js 中的一个官方插件，用于提供拖放交互功能。当你想要在 Vue 组件中实现元素可以被用户点击并拖动到列表顶部的功能时，你可以这样做：

首先，在你的组件中安装 `vuedraggable` 插件，通常是通过 npm 或者 yarn 安装：

npm install vuedraggable
# 或者
yarn add vuedraggable

然后，在需要拖动功能的元素上应用 `draggable` 属性，并配置相关的选项，比如允许拖放到顶部的行为：

<template>
  <div id="list">
    <draggable :items="items" @start="onStart" @end="onEnd">
      <div class="item"
           v-for="(item, index) in items"
           :key="index"
           @click="isTop ? null : moveToTop(index)">
        {{ item }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      items: [...], // 初始化数据数组
      isTop: false, // 初始置顶标志
    };
  },
  methods: {
    onStart(e) {
      this.isTop = true; // 开始拖动时标记置顶状态
    },
    onEnd(e) {
      if (e.elm.dataset.index === 0) { // 检查是否移动到了第一个位置
        this.isTop = false;
        // 如果到了顶部，则可能需要更新实际的排序，这里只是一个示例
        this.items.sort((a, b) => a.order - b.order);
      } else {
        this.isTop = false;
      }
    },
    moveToTop(index) {
      // 这里可以根据需求实现真正的置顶操作，例如交换数组的位置或者更改数据模型中的属性
      const temp = this.items[index];
      this.items.splice(index, 1);
      this.items.unshift(temp);
    },
  },
};
</script>

在这个例子中，`@start` 事件会在开始拖动时触发，我们将置顶标志设为 `true`。当拖动结束且目标元素位于列表首位时（`@end` 事件），我们将置顶标志设置回 `false` 并根据需要调整数组顺序。