ResizeMirror

ResizeMirror

The ResizeMirror plugin resizes the mirror element to the dimensions of the draggable element that the mirror is hovering over.

It will also appends the mirror element to whatever draggable container element the mirror is hovering over. You can add transitions to the mirror element to animate the resizing.

This plugin is not included in the default Draggable bundle, so you'll need to import it separately.

Example of ResizeMirror in action. Custom transitions are applied via CSS (not provided by the plugin) – Grid Layout Example

Import

import { Plugins } from '@shopify/draggable';

import ResizeMirror from '@shopify/draggable/lib/plugins/resize-mirror';

<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins/resize-mirror.js"></script>

API

new ResizeMirror(draggable: Draggable): ResizeMirror Creates an instance of the ResizeMirror plugin.

Options

No options

Examples

import { Sortable, Plugins } from '@shopify/draggable';

const sortable = new Sortable(document.querySelectorAll('ul'), {
  draggable: 'li',
  plugins: [Plugins.ResizeMirror]
});

Caveats

• The mirror is not re-positioned under the cursor once resized, i.e. if the mirror shrinks/expands the mirror may no longer be directly beneath the cursor