vue 拖拽到目标区域

Vue拖拽到目标区域的实现可以通过使用vue-draggable插件来轻松完成。

首先，我们需要在项目中安装vue-draggable。可以通过npm或yarn来安装：

npm安装：

npm install vuedraggable --save

yarn安装：

yarn add vuedraggable

在需要使用拖拽功能的组件中，导入并注册vue-draggable插件：

import draggable from 'vuedraggable';
export default {
  components: { draggable }
}

接下来，我们在模板中使用draggable组件来实现拖拽功能：

<draggable v-model="list" :options="{ group: 'people' }">
  <div v-for="(item, index) in list" :key="index">{{ item }}</div>
</draggable>

上述代码中，我们通过v-model绑定了一个名为list的数组，这将是我们需要拖拽的数据。在draggable组件内部，我们使用v-for来渲染每个列表项，并通过:key绑定唯一的key值。

最后，我们可以为draggable组件添加一些选项来定义拖拽行为。在上述代码中，我们使用了{ group: 'people' }选项来指定了分组，这样可以允许列表项在不同的分组中进行拖拽。

通过上述步骤，我们就可以在Vue中实现拖拽功能了。当在目标区域内拖拽列表项时，Vue会自动更新list数组的顺序，从而达到拖拽排序的效果。