Vue.Draggable学习总结 （ Draggable为基于Sortable.js的vue组件，用以实现拖拽功能 ）

1.在项目中总会遇见一些需要排序的数据 ， 我们可以通过vue.draggable 进行拖动排序 。
2.Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。
3.拖顶的数据和data里的数据为双向绑定 ，在界面变的时候data中的数据也在跟着变化。

安装

npm i -S vuedraggable

使用

页面引入

import draggable from "vuedraggable"

定义组件

  components: {
     draggable
  },

效果展示

 

low的效果图

页面使用

  <draggable
            class="syllable_ul"
            element="ul"
            :list="syllable"
            :options="{group:'title', animation:150}"
            :no-transition-on-drag="true"
            @change="change"
            @start="start"
            @end="end"
            :move="move"
          >
            <transition-group type="transition"  :name="!drag? 'syll_li' : null" :css="true">
              <li v-for="(item , idx) in syllable" :key="idx">{{item.title}}</li>
            </transition-group>
          </draggable>

事件

 //evt里面有两个值，一个evt.added 和evt.removed  可以分别知道移动元素的ID和删除元素的ID
    change(evt) {
      console.log(evt , 'change...')
    },
    //start ,end ,add,update, sort, remove 得到的都差不多
    start(evt) {
      this.drag = true
      console.log(evt , 'start...')
    },
    end(evt) {
      console.log(evt , 'end....')
      this.drag = true
      evt.item //可以知道拖动的本身
      evt.to    // 可以知道拖动的目标列表
      evt.from  // 可以知道之前的列表
      evt.oldIndex  // 可以知道拖动前的位置
      evt.newIndex  // 可以知道拖动后的位置
    },
    move(evt, originalEvent) {
      console.log(evt , 'move')
      console.log(originalEvent) //鼠标位置
    }

属性和方法说明

属性( Attributes)

draggable的属性：

参数	说明	可选值	默认值
value	用于实现拖拽的list，通常和内部v-for循环的数组为同一数组	Array，非必须	null
list	就是value的替代品。从表现上没有看出不同	Array，非必须	null
element	<draggable>标签在渲染后展现出来的标签类型 ,可以用来兼容UI组件	String，	div
options	配置项对象 下面有详细解释	Object

作者：我与十二月
链接：https://www.jianshu.com/p/e8ff1e1cafb1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。