Vue.Draggable学习总结
Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。
特性
支持触摸设备
支持拖拽和选择文本
支持智能滚动
支持不同列表之间的拖拽
不以jQuery为基础
和视图模型同步刷新
和vue2的国度动画兼容
支持撤销操作
当需要完全控制时,可以抛出所有变化
可以和现有的UI组件兼容
安装
npm install vuedraggable
引入
import draggable from 'vuedraggable'
官方例子:
hello.vue
<template>
<div class="fluid container">
<div class="form-group form-group-lg panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Sortable control</h3>
</div>
<div class="panel-body">
<div class="checkbox">
<label><input type="checkbox" v-model="editable">Enable drag and drop</label>
</div>
<button type="button" class="btn btn-default" @click="orderList">Sort by original order</button>
</div>
</div>
<div class="col-md-3">
<draggable class="list-group" element="ul" v-model="list" :options="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false">
<transition-group type="transition" :name="'flip-list'">
<li class="list-group-item" v-for="element in list" :key="element.order">
<i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
{{element.name}}
<span class="badge">{{element.order}}</span>