vue拖拽排序,滚动条内排序自动滚动

对于Vue拖拽排序以及在滚动条内排序时自动滚动的问题，可以使用以下步骤：

1. 引入sortable.js库，它提供了拖拽排序的功能。
2. 使用Vue的v-for指令渲染列表，并且添加ref属性以便后续访问。
3. 使用sortable.js提供的sortable()方法初始化拖拽排序。
4. 监听sortable.js提供的sort事件，将列表排序后的数据更新到Vue的data中。
5. 监听sortable.js提供的start事件，记录当前拖拽的元素的位置，以便后续自动滚动。
6. 监听sortable.js提供的move事件，判断是否需要自动滚动，并且计算滚动的距离。
7. 在需要自动滚动的情况下，使用Vue的$refs访问滚动条元素，并且使用scrollTo()方法进行滚动。

下面是一个示例代码：

<template>
  <div class="sortable-list" ref="list">
    <div v-for="(item, index) in items" :key="item.id" class="sortable-item">{{ item.name }}</div>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
        { id: 6, name: 'Item 6' },
        { id: 7, name: 'Item 7' },
        { id: 8, name: 'Item 8' },
        { id: 9, name: 'Item 9' },
        { id: 10, name: 'Item 10' }
      ],
      draggingIndex: null,
      draggingTop: null,
      draggingBottom: null
    };
  },
  mounted() {
    const list = this.$refs.list;
    Sortable.create(list, {
      onSort: () => {
        const items = [];
        list.childNodes.forEach((node, index) => {
          items.push({ id: node.dataset.id, name: node.textContent.trim() });
        });
        this.items = items;
      },
      onStart: (evt) => {
        this.draggingIndex = evt.oldIndex;
        this.draggingTop = evt.item.offsetTop;
        this.draggingBottom = evt.item.offsetTop + evt.item.offsetHeight;
      },
      onMove: (evt) => {
        const scrollTop = list.scrollTop;
        const scrollHeight = list.scrollHeight;
        const clientHeight = list.clientHeight;
        const delta = 10;
        if (evt.clientY - list.offsetTop < scrollTop + delta) {
          list.scrollTop -= delta;
        } else if (evt.clientY - list.offsetTop > scrollTop + clientHeight - delta) {
          list.scrollTop += delta;
        }
      }
    });
  }
};
</script>

<style>
.sortable-list {
  height: 200px;
  overflow-y: auto;
}

.sortable-item {
  padding: 10px;
  margin-bottom: 5px;
  background-color: #f0f0f0;
  cursor: move;
}
</style>