How to use muuri - 5 common examples

createGrid () {
        this.grid = new Muuri('#' + this.id, this.options)
        self.$emit('gridCreated', this.grid)
      },
      eventListening () {

action:'move',
        threshold: 30
      },
      dragStartPredicate: {
        handle: '.js-dashboard-move-widget'
      },
      dragReleaseDuration: 400,
      dragReleaseEasing: 'ease',
      layout: {
        fillGaps: false,
        rounding: false,
      }
    };

    if (document.querySelector(this.selector) !== null) {
      const dashboard = new Muuri(this.selector, options);
      dashboard.on('dragStart', (): void => {
        document.querySelectorAll('.dashboard-item').forEach((dashboardItem: HTMLDivElement): void => {
          dashboardItem.classList.remove('dashboard-item--enableSelect');
        });
      });
      dashboard.on('dragReleaseEnd', (): void => {
        document.querySelectorAll('.dashboard-item').forEach((dashboardItem: HTMLDivElement): void => {
          dashboardItem.classList.add('dashboard-item--enableSelect');
        });
        this.saveItems(dashboard);
      });

      new RegularEvent('widgetContentRendered', (): void => {
        dashboard.refreshItems().layout();
      }).delegateTo(document, '.dashboard-item');
    }

this.$nextTick(() => {
      this.grid = new Muuri('#card-container', {
        items: '.card',
        dragEnabled: true,
        layout: {
          fillGaps: true,
        },
        dragStartPredicate: {
          handle: '.head-drag',
        },
        dragSortInterval: 0,
        layoutOnInit: false,
        sortData: {
          id: (item, element) => element.getAttribute('data-id'),
        },
      });
      if (cards) {
        this.grid

didInsertElement() {
    this._super(...arguments);
    this.grid = new Muuri(this.element, {
      dragEnabled: true,
      dragSortInterval: 100,
      dragReleaseDuration: 300,
      dragReleaseEasing: 'ease',
      dragStartPredicate: {
        handle: '.cf-card-icon'
      }
    });
    this.grid.on('layoutEnd', (items) => {
      const newOrder = items.map(item => item.getElement().dataset.id);
      return get(this, 'updateSort')(newOrder);
    });
  },
  didUpdate() {

initGrid() {
      this.$options.grid = new Muuri('#card-container', {
        items: '.card',
        dragEnabled: true,
        dragPlaceholder: {
          enabled: true,
        },
        dragStartPredicate: { handle: '.head-drag' },
        dragSortHeuristics: {
          sortInterval: 0,
        },
        layoutOnInit: false,
        sortData: {
          index: (item, el) => this.cards.findIndex(f => f.id === el.id),
        },
      }).on('move', this.onDrag);
      if (this.cards.length) {
        this.$options.grid.sort('index', { layout: 'instant' });