Touch-enabled Drag/Rotate/Resize/Snap Library – subjx

Category: Drag & Drop , Javascript | November 4, 2019
Author: nichollascarter
Views Total: 392
Official Page: Go to website
Last Update: November 4, 2019
License: MIT

Preview:

Touch-enabled Drag/Rotate/Resize/Snap Library – subjx

Description:

subjx is a JavaScript library that enables touch-friendly rotate, resize, and drag’n’drop functionalities on HTML elements and/or SVG objects.

How to use it:

Download & unzip the package and load the necessary JavaScript and CSS files 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 an element 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 element.

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
  }

});

Changelog:

11/04/2019

  • v0.1.9

10/26/2019

  • fix: Added “passive” option to touch events

09/08/2019

  • v0.1.7: fix: tc/bc handles wrong behavior

You Might Be Interested In:


Leave a Reply