10 分钟上手 Vue 组件 Vue-Draggable

Vue 综合了 Angualr 和 React 的优点，因其易上手，轻量级，受到了广泛应用。成为了是时下火热的前端框架，吸引着越来越多的前端开发者！

本文将通过一个最简单的拖拽例子带领大家快速上手 Vue 组件 Vue-Draggable。

首先，需要在工作环境中配置好 Vue-cli，创建一个 vue 项目。

vue create test_1

创建项目时会有很多安装步骤，按下面的说明选择配置：

1.pick a preset 选择 Manually select features

2.Check the features needed for your project 选择 Babel 和 CSS Pre-processors 两项（使用空格键来选中或取消）

3.Pick a CSS pre-processor 选择 Sass/SCSS(with node-sass)

4.Where do you prefer placing config 选择 In dedicated config files

5.Save this as a preset for future projects？ 选 yes ，并填写一个名字，以后的 Vue 项目就可以继续使用这个配置

6. Pick the package manager to use when installing dependencies 选择 Use NPM（有些同学安装可能不会遇到这步）

OK，准备工作做好，下面我们可以进入 Vue-Draggable 的内容。

首先， cd test_1 进入项目目录，配置一下 Vue-Draggable。

npm i vuedraggable -S

接着,在 src/components 目录下新建 Draggable.vue。

在

然后我们就可以在