拖动sortable

安装:npm i sortablejs -S

Vue示例代码:

<template>

    <div>about

       

<div ref="itxst">

  <div data-id="a">item 1</div>

  <div data-id="b">item 2</div>

  <div data-id="c">item 3</div>

</div>

    </div>

   

</template>

<script>

import Sortable from "sortablejs";

export default {

  name: "about",

  data() {

    return {

    sortable:Object

    }

    },

    mounted:function(){

this.initSortbale()

    },

  methods:{

      initSortbale(){

var that=this

// var el = document.getElementById('itxst');

//设置配置

var ops = {

    animation: 200,

    group: "name",

    //拖动结束

    onEnd: function (evt) {

        //获取拖动后的排序

        var arr = that.sortable.toArray();

        // arr数组里的值是 data-id 的顺序

        console.log({evt, arr})

    },

   

}

console.log(that.$refs.itxst)

that.sortable =Sortable.create(that.$refs.itxst, ops);

      }

  }

   

}

</script>

<style lang="less" scoped>

</style>