React如何使用sortablejs实现拖拽排序

$ npm install sortablejs --save

import Sortable from "sortablejs";

<div className="grid-box" ref={this.sortableGroupDecorator}>
    {menus &&
        menus.map((item, i) => {
            return this.renderSelectedItemView(item, i);
        })}
</div>

sortableGroupDecorator = componentBackingInstance => {
    if (componentBackingInstance) {
        let options = {
            draggable: ".rows",
            // animation: "150",
            onEnd: evt => {
                let children = evt.to.children;
            }
        };
        Sortable.create(componentBackingInstance, options);
    }
};

npm i sortablejs -S

<template>
  <div ref="box">
    <div data->a</div>
    <div data->b</div>
    <div data->c</div>
  </div>
</template>
 
<script>
import Sortable from 'sortablejs';
 
export default {
    mounted() {
      this.$nextTick(function() {
        this.initSortable();
      });
    },
    methods: {
      initSortable() {
        let sortable;
        // 拖动配置
        const ops = {
            animation: 200,
            group: "name",
            // 拖动结束
            onEnd: function (evt) {
                // 获取拖动后的排序，arr数组里的值是 data-id 的顺序
                let arr = sortable.toArray();
                console.log({evt, arr})
            },
        };
        //初始化
        sortable = Sortable.create(this.$refs.box, ops);
      }
    },
};
</script>

const config = {
  //一个网页存在多个分组时设置，组名相同的组之间元素可以相互拖拽
  group: "name",
  //2种group写法选一种就可以了
  group: { 
    name: 'name',
    pull: 'clone', //克隆元素
  },
  //是否允许元素内部排序，如果为false当有多个排序组时,多个组之间可以拖拽，本身不能拖拽（默认true）
  sort: true,
  //是否禁用拖拽和排序
  disabled: false,
  //动画效果持续时间（不设置或0都没有过渡效果）
  animation: 150,
  //点击指定class类的元素才能拖拽（比如点击元素内的图标才能拖拽元素，可以给图标设置my-handle class）
  //class可以定义在元素本身上，也可以定义在子元素上
  handle: ".my-handle",
  // class为ignore的元素不能拖动
  filter: ".ignore",
  //含有item 类的元素可以被拖拽（class只能定义在元素本身上）
  draggable: ".item",
  //指定获取拖动后排序的属性
  dataidAttr: 'data-id',
  //给停靠位置添加的class（可以给这个class定义样式）
  ghostClass: "ghost",
  //选中元素添加的类（包括悬浮的元素和停靠位置的元素）
  chosenClass: "chosen",
  //拖拽对象移动时添加的类
  draGClass: "drag",
  //禁用HTML5原生拖拽
  forceFallback: false,
  ...
 
  //克隆事件
  onClone: function (evt) {
      //被克隆的对象（被移到另外地方的那个元素）
      var origEl = evt.item;
      //克隆后的对象（还是在原来位置的元素）
      var cloneEl = evt.clone;
      cloneEl.innerhtml = "clone出的元素";
  },
  ...
}