Author: | nichollascarter |
---|---|
Views Total: | 12,712 views |
Official Page: | Go to website |
Last Update: | March 22, 2019 |
License: | MIT |
Preview:

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