Drag/Resize/Rotate Javascript Library | Subjx

How to make use of it:

Download & unzip the package deal and cargo the required JavaScript and CSS information from the dist folder.

<link rel="stylesheet" href="./dist/style/subjx.css" />
<script src="./dist/js/subjx.js"></script>

Enable the drag, resize, rotate on a component you specify.

const myInstance = Subjx('.myElement').drag({
  // parent container
  container: '#container',
  // 'x' or 'y'
  axis: 'x',
  // snap to grid
  snap: {
    x: 20,
    y: 20,
    angle: 45
  },
  // enable/disable behaviors
  each: {
    move: true,
    resize: true, 
    rotate: true
  }
  // fired on drop
  drop(e, el) {
    console.log(el);
  },
  // preserve aspect ratio when resizing
  proportions: true,
  // show/manipulate rotation point
  rotationPoint: true,
  // restrict moving
  restrict: 'selector'
});

Clone the component.

const myInstance = Subjx('.myElement').clone({
  // dropping area
  stack: 'selector',
  // set clone parent
  appendTo: 'selector',
  // additional CSS styles
  style: {
    border: '1px dashed green',
    background: 'transparent'
  },
  // fired on drop
  drop(e, el) {
    console.log(el);
  }
});

Event handlers.

const myInstance = Subjx('.myElement').drag({
  onInit(el) {
    // fires on tool activation
  },
  onMove(dx, dy) {
    // fires on moving
  },
  onResize(dx, dy, handle) {
    // fires on resizing
  },
  onRotate(rad) {
    // fires on rotation
  },
  onDrop(e, el) {
    // fires on drop
  },
  onDestroy(el) {
    // fires on tool deactivation
  }
});

Touch-enabled Drag/Rotate/Resize/Snap Library, Subjx Plugin/Github

See Demo And Download