Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件
以上是Vue.Draggable的官网介绍。
Vue.Draggable使用起来是非常方便的,下面我来介绍一下它在vue中基本的用法。
1:下载安装
npm i -S vuedraggable
2:在你需要的页面中导入它
// 将它导入你的页面中import vuedraggable from 'vuedraggable'// 它是个组件,所以你需要把它注册为局部组件。(当然,你也可以将它注册为全局组建供你随时使用)components: {vuedraggable}
3:让我们来使用它
1:这是 vueDraggable 固定的基本结构
<vuedraggable><transition-group><!-- 这里面放你需要拖拽的元素 --></transition-group></vuedraggable>
2:当然,为了实现它的功能我们需要给它加上属性和数据。
HTML:
v-model :拖拽组件必须的属性,绑定的是要拖拽移动的数组。
<vuedraggable v-model="arr" class="draggable"><transition-group><div class="item" v-for="(item, i) in arr" :key="i">{{item}}</div></transition-group></vuedraggable>
CSS:
.draggable {width: 500px;margin: auto;}.item {height: 40px;line-height: 40px;margin-bottom: 20px;background-color: skyblue;text-align: center;color: #fff;cursor: move;}
JS:
data () {return {arr: [1, 2, 3, 4, 5, 6, 7]}}
效果图如下:
当然了,此时你只能进行简单的数据拖拽而已,如果想要更加炫酷的效果我们需要加上其他的属性了。
3:更多的属性,更炫酷的效果。
我们可以加上 chosen-class 和 animation 来让动画过渡更加的丝滑。
chosen-class: 定义被选中拖拽时元素的样式,需要在样式后面加上 !important,并且需要开启force-fallback="true"这个属性。
animation:拖动时的动画效果时间,单位毫秒
HTML:
<!-- 在刚才的基础上我们增加了 chosen-class、force-fallback、animation属性。--><vuedraggable v-model="arr"chosen-class="chose"force-fallback="true"animation="1000"class="draggable"><transition-group><div class="item"v-for="(item, i) in arr":key="i">{{item}}</div></transition-group></vuedraggable>
CSS:
.chose {background-color: pink;border: 1px solid #000 !important;cursor: move !important;}
效果如下:
请忽略这个水印。。。。