How to use the @shopify/draggable.Plugins.SwapAnimation function in @shopify/draggable

To help you get started, we’ve selected a few @shopify/draggable examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github aidewoode / black_candy / app / frontend / javascripts / controllers / playlist_sortable_controller.js View on Github external
swapAnimation: {
        duration: 150,
        easingFunction: 'ease-in-out',
      },

      mirror: {
        appendTo: this.element,
        constrainDimensions: true,
      },

      classes: {
        'source:dragging': 'is-dragging-placeholder',
        mirror: 'is-dragging'
      },

      plugins: [Plugins.SwapAnimation]
    });

    this.sortable.on('sortable:stop', this._reorderPlaylist);
  }
github gesteves / denali / app / frontend / controllers / admin / entry_form_controller.js View on Github external
connect () {
    this.sortablePhotos = new Sortable(this.photosTarget, {
      delay: 100,
      classes: {
        'source:dragging': 'draggable-dragging',
        'mirror': 'draggable-mirror'
      },
      handle: '.draggable-handle',
      plugins: [Plugins.SwapAnimation]
    });

    this.sortablePhotos.on('drag:start', event => this.startSort(event));
  }
github Shopify / draggable / examples / src / content / Plugins / SwapAnimation / index.js View on Github external
export default function PluginsSwapAnimation() {
  const containers = document.querySelectorAll('#SwapAnimation .BlockLayout');

  if (containers.length === 0) {
    return false;
  }

  const sortable = new Sortable(containers, {
    draggable: '.Block--isDraggable',
    mirror: {
      constrainDimensions: true,
    },
    plugins: [Plugins.SwapAnimation],
    swapAnimation: {
      duration: 200,
      easingFunction: 'ease-in-out',
    },
  });

  return sortable;
}