Skip to content

Latest commit

 

History

History
 
 

Mirror

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

Mirror

The mirror plugin listens to Draggables drag:start, drag:move and drag:stop events to control the mirror. It emits events like mirror:create, mirror:created, mirror:attached, mirror:move and mirror:destroy. This plugin is used by draggable by default, but could potentially be replaced with a custom plugin.

API

new Mirror(draggable: Draggable): Mirror
To create a mirror plugin instance.

Options

xAxis {Boolean}
If enabled, the mirror will move on the x axis. Default: true

yAxis {Boolean}
If enabled, the mirror will move on the y axis. Default: true

constrainDimensions {Boolean}
If enabled, the source elements height and width will be applied to the mirror. Default: false

cursorOffsetX {Number|null}
Defining this sets the offset from cursor to mirror manually on the x axis. Default: null

cursorOffsetY {Number|null}
Defining this sets the offset from cursor to mirror manually on the y axis. Default: null

appendTo {String|HTMLElement|Function}
The mirror plugin allows you to specify where the mirror should be appended to. For clarification, this is not where the source will be placed, only the temporary mirror element, which is the element that follows your cursor as you drag. You can specify a css selector, a HTMLElement or a function that returns a HTMLElement. Default is the source parent element.

Events

Name Description Cancelable Cancelable action
mirror:create Gets fired before draggable mirror gets created true Prevents mirror creation
mirror:created Gets fired when draggable mirror gets created false -
mirror:attached Gets fired when draggable mirror gets attached to DOM false -
mirror:move Gets fired when draggable mirror moves true Stop mirror movement
mirror:destroy Gets fired when draggable mirror gets removed true Stop mirror removal

Examples

y Axis only

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

const draggable = new Draggable(document.querySelectorAll('ul'), {
  draggable: 'li',
  mirror: {
    constrainDimensions: true,
    cursorOffsetX: 10,
    cursorOffsetY: 10,
    xAxis: false
  }
});

x Axis only

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

const sortable = new Sortable(document.querySelectorAll('ul'), {
  draggable: 'li',
  mirror: {
    constrainDimensions: true,
    cursorOffsetX: 10,
    cursorOffsetY: 10,
    yAxis: false
  }
});

Appending mirror

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

const sortable = new Sortable(document.querySelectorAll('ul'), {
  draggable: 'li',
  mirror: {
    appendTo: '.some-other-element'
  }
});