How to use the sortablejs.create function in sortablejs

}
                return ret;
            };

            // make layer list sortable
            sortable.create(element[0].querySelector('#layer-list'), {
                onSort() {
                    // update layer order
                    _.each(this.toArray(), (val, i) => {
                        scope.layers.layerOrder[i] = val;
                    });
                },
            });

            // make adjustments sortable
            sortable.create(element[0].querySelector('#adjustment-list'), {
                onSort({ oldIndex, newIndex }) {
                    const adjustments = scope.state.adjustments.get(scope.state.active);
                    const adjustment = adjustments.splice(oldIndex, 1)[0];
                    adjustments.splice(newIndex, 0, adjustment);
                    scope.applyState();
                },
                handle: '.sort-handle',
            });
        },
        restrict: 'E',

private setSort() {
        const draggableSelect = this.$refs.draggableSelect as Select;
        const el = draggableSelect.$el.querySelectorAll(
            ".el-select__tags > span"
        )[0] as HTMLElement;
        this.sortable = Sortable.create(el, {
            ghostClass: "sortable-ghost", // Class name for the drop placeholder
            onEnd: evt => {
                if (
                    typeof evt.oldIndex !== "undefined" &&
                    typeof evt.newIndex !== "undefined"
                ) {
                    const targetRow = this.value.splice(evt.oldIndex, 1)[0];
                    this.value.splice(evt.newIndex, 0, targetRow);
                }
            }
        });
    }
}

setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          // to avoid Firefox bug
          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          dataTransfer.setData('Text', '');
        },
        onEnd: evt => {
          const targetRow = this.list.splice(evt.oldIndex, 1)[0];
          this.list.splice(evt.newIndex, 0, targetRow);

          // for show the changes, you can delete in you code
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0];
          this.newList.splice(evt.newIndex, 0, tempIndex);
        },
      });
    },

componentDidMount = () => {
    this.loadPoems();
    this.state.intervalId = setInterval(this.loadPoems, this.props.route.pollInterval);
    const el = document.getElementById('mainPoemList');
    Sortable.create(el, {
      onUpdate: (evt) => {
        const reordering = this.state.data.slice();
        const movedPoem = reordering.splice(evt.oldIndex, 1);
        reordering.splice(evt.newIndex, 0, ...movedPoem);
        this.setState({ data: reordering });
        this.savePoems();
      },
    });
  }

onRender: function () {
        Sortable.create(this.el, {
            onEnd: () => {
                this.handleSave();
            }
        });
    },
    handleSave: function () {

this.$nextTick(() => {
        let xTable = this.$refs.xTable1;
        Sortable.create(
          xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
          {
            handle: ".drag-btn",
            onEnd: ({ newIndex, oldIndex }) => {
              let currRow = this.tableData.splice(oldIndex, 1)[0];
              this.tableData.splice(newIndex, 0, currRow);
            }
          }
        );
      });
    },

render: function () {
        this.$el.html(template({
            servers: this.servers
        }));

        this.breadcrumb.setElement(this.$('.g-config-breadcrumb-container')).render();
        sortable.create(this.$('.g-ldap-server-accordion')[0], {
            filter: 'input',
            preventOnFilter: false
        });
        return this;
    },

var ready = () => {
  var update_positions = function (el){
    $(el).children('.collection_item').each(function (i) {
      var position_input = $(this).find('input.collection_item_position');
      position_input.val(i);
    });
  }

  var form_el = document.getElementById('collectibles');
  window.CollectionItems = Sortable.create(form_el, {
    animation: 150,
    ghostClass: 'ghost',
    sort: true
  });

  $("body").on('DOMSubtreeModified', "#collectibles", function(evt) {
      update_positions(evt.target);
  });

  $(".remove-field").on('click', function(evt) {
    var field_id = $(evt.target).data("field-id");
    $("#" + field_id).remove();
  });
}

_node(n) {
		if (n) {
			this.node = n;
			this.sortable = Sortable.create(n, {
				handle: '.list-group',
				disabled: !this.props.draggable
			});
		}
	}

Template.productGrid.onRendered(function () {
  const instance = this;

  if (Reaction.hasPermission("createProduct")) {
    const productSort = $(".product-grid-list")[0];

    this.sortable = Sortable.create(productSort, {
      group: "products",
      handle: ".product-grid-item",
      onUpdate() {
        const tag = ReactionProduct.getTag();

        instance.$(".product-grid-item")
          .toArray()
          .map((element, index) => {
            const productId = element.getAttribute("id");
            const position = {
              position: index,
              updatedAt: new Date()
            };

            Meteor.call("products/updateProductPosition", productId, position, tag,
              error => {