Draggable, Resizable & Rotatable Plugin – Drag-resize-rotate-library

Category: Javascript | January 30, 2019
Author: nichollascarter
Views Total: 576
Official Page: Go to website
Last Update: January 30, 2019
License: MIT

Preview:

Draggable, Resizable & Rotatable Plugin – Drag-resize-rotate-library

Description:

A Photoshop inspired touch-enabled draggable, resizable and rotatable library without any 3rd dependencies.

See also:

How to use it:

Import the Drag-resize-rotate-library’s files into the html file.

<script type="text/javascript" src="subj.js"></script>
<link rel="stylesheet" href="subj.css">

Initialize the Drag-resize-rotate-library on an element you specify.

<div id='example'>
  Element to drag, resize, rotate
</div>
Subj('#example').draggle();

Set the snap size (default: 10).

Subj('#example').draggle({
  snap: 20
});

Execute a function after the element is dragged.

Subj('#example').draggle({
  drop: (e,el) => {console.log(el);},
});

The library also provides a functionality to clone element.

Subj('#example')..clone({
  stack: 'selector',
  style: 'clone', // or custom styles
  appendTo: 'selector'
});

Changelog:

01/30/2019

  • Removed excess code

01/21/2019

  • Fixing missed operator

01/19/2019

  • Allow parent scale

12/18/2018

  • Fixing bugs, optimizing

11/06/2018

  • Minor changes

You Might Be Interested In:


Leave a Reply