zoukankan      html  css  js  c++  java
  • Vue.Draggable/SortableJS 的排序功能,在VUE中的使用

    此插件vue git: https://github.com/SortableJS/Vue.Draggable

    vue 里使用示例: https://sortablejs.github.io/Vue.Draggable/#/simple  (示例右角按钮 可跳转到相关源码)

    源git:             https://github.com/SortableJS/Sortable

    基于Sortable.js http://www.cnblogs.com/xiangsj/p/6628003.html

    使用方法:

    一. 下载包:cnpm install vuedraggable -S   (后加-S 保存配置到package.json)


    二. 使用:

    引入依赖,注册组件

     import draggable from 'vuedraggable'
      ...
      export default {
            components: {
                draggable,
            },
      ...

    html:

    <draggable v-model="myArray">
       <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
    </draggable>

    data:

    data () { 
        return {
        //测试用 myArray: [{ id:
    "1", name:"aaaaaaaaaaaaa", },{ id:"2", name:"bbbbbbbbbbbbb", },{ id:"3", name:"ccccccccccccccc", }] } },

    如上图,拖拽排序实现了,


    三. 拓展使用:

    分组排序和部分手势:options="{group:'group01'}",拖拽中,拖拽结束,及进行排序后的存储(按索引)...

    <draggable v-model="myArray"
    handle=".handle"
    :group="{ name: 'people'}"
    @change="datadragEnd"
    >
            <transition-group>
                <div v-for="element in myArray" :key="element.id">
                    {{element.name}}
                </div>
            </transition-group>
    </draggable>
    
    methods: {
          datadragEnd (evt) {
            console.log('拖动前的索引 :' + evt.oldIndex)
            console.log('拖动后的索引 :' + evt.newIndex)
          }
        }

     .

  • 相关阅读:
    牛客练习赛24 E:青蛙(最短路)
    菜根谭#10
    菜根谭#9
    菜根谭#8
    菜根谭#7
    菜根谭#6
    菜根谭#5
    菜根谭#4
    菜根谭#3
    菜根谭#2
  • 原文地址:https://www.cnblogs.com/xiangsj/p/7278663.html
Copyright © 2011-2022 走看看