How to use the sortablejs function in sortablejs

setState({ beginUpload: false, fileUploaded: false});
            },
            // 'Key': function(up, file) {
            //   // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
            //   // 该配置必须要在 unique_names: false , save_key: false 时才生效
            //
            //   var key = "";
            //   // do something with key here
            //   return key
            // }
          }
        });
      }
    });

    new Sortable(el, {
      sort: true,  // sorting inside list
      delay: 0, // time in milliseconds to define when the sorting should start
      store: {
        set: (sortable) => {
          const order = sortable.toArray();
          Meteor.call('singlePages.changeIndex', order);
        }
      },
      animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
      dataIdAttr: 'data-id'
    });
  }
};

init () {
        this.initSuits()
        const $sortContainer = this.node.name === 'HView' ? this.$el.children[0] : this.$el

        this.$sortable = new Sortable($sortContainer, {
          group: this.nodeUid,
          draggable: '.comp-suit',
          // sort: false,
          // Element is dropped into the list from another list
          // Changed sorting within list
          // onUpdate: this.handleDragUpdate,
          onSort: this.handleDragSort
        })
      },
      handleDragSort (e) {

movableInit() {
		this._header = this._grid.getHeader();

		if (this._sortable) {
			this._sortable.destroy();
		}

		this._sortable = new Sortable(this._header, {
			onUpdate: this._boundHandleDragEnd,
			animation: 300
		});
	}

const bookGroupConfig = {
            name: 'book',
            pull: ['book', 'chapter'],
            put: ['book', 'chapter'],
        };

        const chapterGroupConfig = {
            name: 'chapter',
            pull: ['book', 'chapter'],
            put: function(toList, fromList, draggedElem) {
                return draggedElem.getAttribute('data-type') === 'page';
            }
        };

        for (let sortElem of sortElems) {
            new Sortable(sortElem, {
                group: sortElem.classList.contains('sort-list') ? bookGroupConfig : chapterGroupConfig,
                animation: 150,
                fallbackOnBody: true,
                swapThreshold: 0.65,
                onSort: this.updateMapInput.bind(this),
                dragClass: 'bg-white',
                ghostClass: 'primary-background-light',
            });
        }
    }

initSortable() {
        new Sortable(document.querySelector(this.dropname + ' .sortable-dropzone'), {
            animation: 150,
            onEnd: () => {
                this.resortElement();
            },
        });
    }

sortStart() {
        this.rules.ids.forEach(id => this.rules.byId[id].onSortingStart());
        this.appContainer.classList.add('sorting');
        [...document.getElementsByClassName('nl-rule-between')].forEach(el => el.parentElement.removeChild(el));
        this.sortable = new Sortable(this.rulesContainer, {
            draggable: '> .nl-rule',
            direction: 'vertical',
            animation: 150,
            onEnd: (e) => {
              this.moveRule(e.oldIndex, e.newIndex);
            },
        });
        this.initialOrder = this.sortable.toArray();
    }

initSortable() {
        const scrollBoxes = this.elem.querySelectorAll('.scroll-box');
        for (let scrollBox of scrollBoxes) {
            new Sortable(scrollBox, {
                group: 'shelf-books',
                ghostClass: 'primary-background-light',
                animation: 150,
                onSort: this.onChange.bind(this),
            });
        }
    }