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

Category: Javascript | March 22, 2019
2 Comments
Demo Download
Author:nichollascarter
Views Total:12,712 views
Official Page:Go to website
Last Update:March 22, 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:

03/22/2019

  • Added SVG elements transformation support
  • Fixed bug with missing the top the left properties in style

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

See Also:

You Might Be Interested In:

2 thoughts on “Draggable, Resizable & Rotatable Plugin – Drag-resize-rotate-library”

  1. Alper Onur

    windows scroll problem fixed.

    replace offset(node) with:

    function offset(node) {
    var _offset = node.getBoundingClientRect();

    var _scrollLeft = 0;
    if(document.documentElement)
    _scrollLeft = document.documentElement.scrollLeft;
    else if(document.body.parentNode)
    _scrollLeft = document.body.parentNode.scrollLeft;

    var _scrollTop = 0;
    if(document.documentElement)
    _scrollTop = document.documentElement.scrollTop;
    else if(document.body.parentNode)
    _scrollTop = document.body.parentNode.scrollTop;

    return { bottom: _offset.bottom, height: _offset.height, left: _offset.left + _scrollLeft, right: _offset.right, top: _offset.top + _scrollTop, width: _offset.width, x: _offset.x, y: _offset.y };
    };

    Reply ↓
  2. GJMAC

    This does not work at all for me. Downloaded and did exactly what is above in an html file.

    Uncaught SyntaxError: Cannot use import statement outside a module
    Example.html:16 Uncaught ReferenceError: Subjx is not defined
    at HTMLDocument. (Example.html:16)
    at fire (jquery-1.10.2.js:3062)
    at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3174)
    at Function.ready (jquery-1.10.2.js:447)
    at HTMLDocument.completed (jquery-1.10.2.js:118)

    Reply ↓

Leave a Reply