vue中使用sortable.js实现拖动排序

一、安装依赖

npm install vuedraggable --save

npm insall sortablejs --save

二、引入依赖

import draggable from 'vuedraggable'

import Sortable from 'sortablejs'

三、JS函数拖动改变顺序(数组):

drag(){

            let newArr=this.checkMaterial.join(',');

            let el = document.getElementById('items');

            //let sortable = Sortable.create(el);

            let that=this;

            Sortable.create(el,{

                group: newArr,

                store: {

                  //获取初始的数组

                  get: function (sortable) {

                  // console.log(sortable.options.group.name)

                    let order = sessionStorage.getItem(sortable.options.group.name);

                    return order ? order.split(',') : [];

                  },

                  //获取排序之后的数组

                  set: function (sortable) {

                    var order = sortable.toArray();

                    sessionStorage.setItem(sortable.options.group.name, order.join(','));

                    that.checkMaterial=order;

                  }

                }

            })

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容