Subjx(dragging/resizing/rotating)
Draggable, Resizable, Rotatable library for creating drag-n-drop applications.
Demos
Basic example
Drag, zoom and pan SVG
Usage
Library provides dragging/resizing/rotating/snapping SVG/HTML Elements.
Installation
Run npm install to install with npm.
npm install subjx
Including via a <script> tag:
<script src="../dist/js/subjx.js"></script>Get started
Main function subjx returns Subjx instance which based on elements finded by
passed parameters:
import subjx from 'subjx';
import 'subjx/dist/style/subjx.css';
// possible parameters
const xElem = subjx( 'selector' ) |
subjx( element ) |
subjx( elementArray );Transformation(drag/resize/rotate)
// enabling tool by `drag` method with the optional parameters
// by default just call `.drag()`
const xDraggable = xElem.drag();
// for disabling use `disable` method for each object
xDraggable.disable();"Draggable" API
// getter returns root DOM element of 'controls'
xDraggable.controls;
// provides access to useful options
xDraggable.storage;
// for example: to get reference to any handle's DOM
const {
handles: { tl, tr, ...etc }
} = xDraggable.storage;
// enables dragging
// there is no need to call this method manually
xDraggable.enable(options);
// disables dragging, removes controls and handles
xDraggable.disable();
// adds event listener for some events
xDraggable.on(eventName, cb);
// removes event listener for some events
xDraggable.off(eventName, cb);
// Event names
const EVENTS = [
'dragStart',
'drag',
'dragEnd',
'resizeStart',
'resize',
'resizeEnd',
'rotateStart',
'rotate',
'rotateEnd'
];
// execute dragging manually
xDraggable.exeDrag({
dx, // drag along the x axis
dy // drag along the y axis
});
// execute resizing manually
xDraggable.exeResize({
dx, // resize along the x axis
dy, // resize along the y axis
revX, // reverse resizing along the x axis
revY, // reverse resizing along the y axis
doW, // allow width resizing
doH // allow height resizing
});
// execute rotating manually
xDraggable.exeRotate({
delta // radians
});
// Align element inside container: ['t', 'l', 'r', 'b', 'v', 'h']
xDraggable.applyAlignment('tr');
// Call this method when applying scale or viewBox values changing
// useful when element's container was transformed from outside
xDraggable.fitControlsToSize();
// Sets the origin for an element's transformations
xDraggable.setTransformOrigin(
{
x, // absolute the origin's position x coordinate
y, // absolute he origin's position y coordinate
dx, // offset the origin's position x coordinate
dy // offset the origin's position y coordinate
},
pin // leaves current origin fixed if true or not if false
);
// Sets transform origin to default
xDraggable.resetTransformOrigin();
// Returns element's current dimensions
xDraggable.getDimensions();Options
| Property | Description | Type | Default |
|---|---|---|---|
| container | Transformation coordinate system | 'selector' | element |
element.parentNode |
| controlsContainer | Parent element of 'controls' | 'selector' | element |
element.parentNode |
| axis | Constrain movement along an axis | string: 'x' | 'y' | 'xy' |
'xy' |
| snap | Snapping to grid in pixels/radians | object |
{ x: 10, y: 10, angle: 10 } |
| each | Mimic behavior with other '.draggable' elements | object |
{ move: false, resize: false, rotate: false } |
| proportions | Keep aspect ratio on resizing / scaling | boolean |
false |
| draggable | Allow or deny an action | boolean |
true |
| resizable | Allow or deny an action | boolean |
true |
| rotatable | Allow or deny an action | boolean |
true |
| scalable | Applies scaling only to root element | boolean |
false |
| restrict | Restricts element dragging/resizing/rotation | 'selector' | element |
- |
| rotatorAnchor | Rotator anchor direction | string: 'n' | 's' | 'w' | 'e' |
'e' |
| rotatorOffset | Rotator offset | number |
50 |
| transformOrigin | Sets the origin for an element's transformations | boolean | Array |
false |
Notice: In most cases, it is recommended to use 'proportions' option
Methods
subjx('.draggable').drag({
onInit(elements) {
// fires on tool activation
},
onMove({ clientX, clientY, dx, dy, transform }) {
// fires on moving
},
onResize({ clientX, clientY, dx, dy, transform, width, height }) {
// fires on resizing
},
onRotate({ clientX, clientY, delta, transform }) {
// fires on rotation
},
onDrop({ clientX, clientY }) {
// fires on drop
},
onDestroy(el) {
// fires on tool deactivation
}
});Subscribing new draggable element to previously activated(useful with each option)
const options = {};
const observable = subjx.createObservable();
subjx('.draggable').drag(options, observable);
// pass Observable to new element
const createDraggableAndSubscribe = e => {
subjx(e.target).drag(options, observable);
};Allowed SVG elements:
g, path, rect, ellipse, line, polyline, polygon, circle
Cloning
Options
const xCloneable = xElem.clone({
// dropping area
stack: 'selector',
// set clone parent
appendTo: 'selector',
// set clone additional style
style: {
border: '1px dashed green',
background: 'transparent'
}
});Methods
subjx('.cloneable').clone({
onInit(el) {
// fires on tool activation
},
onMove(dx, dy) {
// fires on moving
},
onDrop(e) {
// fires on drop
},
onDestroy() {
// fires on tool deactivation
}
});Disabling
xCloneable.disable();License
MIT (c) Karen Sarksyan