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

Category: Drag & Drop , Javascript | September 8, 2019
Author: nichollascarter
Views Total: 298
Official Page: Go to website
Last Update: September 8, 2019
License: MIT

Preview:

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

Description:

subjx is a JavaScript library which 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',

  // 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);
  }

});

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);
  }
  
});

Changelog:

09/08/2019

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

You Might Be Interested In:


Leave a Reply