vuedraggable scroll

Vue.Draggable是一个基于Sortable.js实现的Vue拖拽插件，它支持移动设备拖拽和选择文本智能滚动，可以在不同列表之间进行拖拽操作。如果你想要实现拖拽过度效果，可以使用Vue的过渡动画来实现。

关于Vue.Draggable的使用方法，你可以参考以下步骤：

1. 首先，安装Vue.Draggable插件。你可以使用npm或yarn来安装：

npm install vuedraggable

2. 在你的Vue项目中，导入Vue.Draggable插件：

import draggable from 'vuedraggable'

3. 在你的Vue组件中，使用Vue.Draggable插件来实现拖拽功能。你可以在模板中使用`draggable`标签，并将你的数据绑定到`v-model`指令上：

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

在上面的例子中，`list`是一个包含了拖拽元素的数组，`item`是数组中的每个元素。

4. 最后，你可以在Vue组件的`data`选项中定义你的拖拽元素的初始数据：

data() {
  return {
    list: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  }
}

在上面的例子中，`list`是一个包含了三个拖拽元素的数组。

关于滚动的问题，Vue.Draggable插件默认是不支持滚动的。如果你想要实现滚动效果，你可以使用Vue的过渡动画来实现。你可以在拖拽元素进入或离开容器时添加过渡效果，从而实现滚动效果。

以下是一个示例代码，演示了如何使用Vue.Draggable插件实现拖拽和滚动效果：

<template>
  <div>
    <draggable v-model="list" @start="onDragStart" @end="onDragEnd">
      <transition-group name="list" tag="div">
        <div v-for="item in list" :key="item.id" class="item">{{ item.name }}</div>
      </transition-group>
    </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' }
      ]
    }
  },
  methods: {
    onDragStart() {
      // 在拖拽开始时执行的操作
    },
    onDragEnd() {
      // 在拖拽结束时执行的操作
    }
  }
}
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: opacity 0.5s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
}
.item {
  margin-bottom: 10px;
}
</style>

在上面的例子中，我们使用了Vue的过渡动画来实现拖拽元素的滚动效果。当拖拽元素进入或离开容器时，会添加或移除`list-enter`和`list-leave-to`类，从而触发过渡动画。