实现拖拽元素改变元素列表序号列表

参考文档：http://www.sortablejs.com/index.html

我司有需求，拖动列表改变列表排序。

so，尝试了一下。

按照文档介绍，通过npm安装：

npm install sortablejs --save

在react中使用：（仅示例）

import React, { useEffect } from 'react';
// import Sortable from 'react-sortable';
import Sortable from "sortablejs";
import { PageContainer } from '@ant-design/pro-layout';
import style from './style.less'
const testa = () => {
  useEffect(() => {
    new Sortable(document.getElementById('items'), {
      animation: 150,
      ghostClass: 'blue-background-class',
      onUpdate: function (evt) {
        console.log(evt.oldIndex, evt.newIndex);//oldIndex元素原始位置，newIndex元素最新位置
      },
    });
  }, [])
  return (
    <PageContainer title={false}>
      <ul id="items" className={style.example1}>
        <li key="0">a0</li>
        <li key="1">a1</li>
        <li key="2">a2</li>
        <li key="3">a3</li>
        <li key="4">a4</li>
        <li key="5">a5</li>
        <li key="6">a6</li>
      </ul>
    </PageContainer>
  )
}
export default testa

其他有需要用到的方法如下：

                                var sortable = new Sortable(el, {
                                    group: "name",  // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
                                    sort: true,  // boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序
                                    delay: 0, // number 定义鼠标选中列表单元可以开始拖动的延迟时间；
                                    touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag even