vue中如何简单使用vue.draggable组件实现拖拽功能

Vue.是一款基于.js实现的vue拖拽插件 。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件
以上是Vue.的官网介绍 。
Vue.使用起来是非常方便的,下面我来介绍一下它在vue中基本的用法 。
1:下载安装
npm i -S vuedraggable
2:在你需要的页面中导入它
// 将它导入你的页面中import vuedraggable from 'vuedraggable'// 它是个组件,所以你需要把它注册为局部组件 。(当然,你也可以将它注册为全局组建供你随时使用)components: {vuedraggable}

vue中如何简单使用vue.draggable组件实现拖拽功能

文章插图
3:让我们来使用它
1:这是固定的基本结构

2:当然,为了实现它的功能我们需要给它加上属性和数据 。
HTML:
v-model :拖拽组件必须的属性,绑定的是要拖拽移动的数组 。