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

JavaScript021

vue中使用sortable.js实现拖动排序,第1张

一、安装依赖

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

                  }

                }

            })

}

取消排序是不可能的。你可以在生成列表的时候带上顺序号，然后重排，例​

<ul>

<li oid="1">content 1</li>

<li oid="2">content 2</li>

</ul>

function reset() {

var objs = []

var countObjs = $('ul>li').length

for (var i = 1i <= countObjsi++) {

objs.push($('ul>li[oid=' + i + ']'))

}

$('ul').empty()

for (var i = 0i <objs.lengthi ++) {

$('ul').append(objs[i])​

}

}