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

Posted 2023-03-07

参考技术A 一、安装依赖

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;

                 

               

            )