godswearhats / jquery-ui-rotatable Goto Github PK
View Code? Open in Web Editor NEWAdds a small handle to an HTML element to allow it to be rotated
License: MIT License
Adds a small handle to an HTML element to allow it to be rotated
License: MIT License
I tried rotating the resizable object by 180 degrees in the demo. Then when I tried to resize the object, with the resizable handle there was some strange behavior.
try ur demo in mobile
it is not work
How is possible to get a variable with the Id of the div ratated?
Thanks
Steps to reproduce:
The rotation is still active.
This can be fixed by adding the following on line (Line #165)
rotateElement: function(event) {
if(!event.which){return;}
jQuery UI's draggable provides the ability to specify an external element as a handler for the rotation.
This would be incredibly useful for me within jquery-ui-rotatable. Any plans on implementing something like this?
After rotating an object I need to retrieve the current angle so I can persist it in my backend.
At this moment, I'm doing this
jQuery(div).rotatable({
stop: function (element) {
var rotation = jQuery(element.target).data('ui-rotatable').elementCurrentAngle;
console.log('Rotatable stopped', rotation);
}
});
it works fine, but somehow it feels hacky. Is there a canonical way to get the widget attributes in a given moment?
Is there a way to recreate rotatable once ui-rotatable-handle has been removed??
With jQuery2, it won't work well for me.
To reproduce the problem, modify demo.html like htis
<!--
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
-->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
Can you upload the newest version to the CDN? I noticed that you can't disable the scroll-wheel in the CDN version.
I love the plugin! Thanks for all your help!
The problem is when you rotate a element, then you try to drag it.. the element make a little jump of position, then drag..... that little jump is big as the rotation angle.... that happens in the DEMO too
http://godswearhats.com/jquery-ui-rotatable/demo.html
With the #target3, if you resize a little your element, then rotate, then drag... the jump of position is clearly visible. I don't know the reason why #target2 works perfectly but in my implementation (same than target2) acts like target3 with the little jump when I try to drag. Help!
Seems related to the position:absolute.... position:relative works fine!
Using this script with jquery-ui-1.9.1 the handle is duplicated when rotating element.
I hide it in rotateElement(); ( Im not sure this is proper way)
rotateElement: function(event) {
~~~
$( ".ui-draggable-dragging" , this.element ).hide();
return false;
}
It would be great to be able to cancel a rotate by returning false, or provide containment by being able to alter the angle within the rotate callback.
An example of how this might be achieved:
rotateElement: function(event) {
if (!this.element || this.element.disabled) {
return false;
}
var rotateAngle = this.getRotateAngle(event);
var previousRotateAngle = this.elementCurrentAngle;
this.elementCurrentAngle = rotateAngle;
// Plugins callbacks need to be called first.
if ( this._propagate("rotate", event) === false ) {
this.elementCurrentAngle = previousRotateAngle;
return false;
}
var ui = this.ui();
if ( this._trigger("rotate", event, ui ) == false ) {
this.elementCurrentAngle = previousRotateAngle;
return false;
} else if (ui.angle.current != rotateAngle) {
rotateAngle = ui.angle.current;
this.elementCurrentAngle = rotateAngle;
}
this.performRotation(rotateAngle);
if (previousRotateAngle != rotateAngle) {
this.hasRotated = true;
}
return false;
},
This changes how your plugin works a bit, since now rotate is triggered BEFORE the actual rotation. This is actually more in line with how typical jQuery widgets work.
Anyways, let me know what you think ... I could fork and create a pull request if you are interested.
var params = {
// Callback fired on rotation start.
start: function(event, ui) {
},
// Callback fired during rotation.
rotate: function(event, ui) {
// if (Math.abs(ui.angle.current > 6)) {
console.log("Rotating " + ui.angle.current)
// }
},
// Callback fired on rotation end.
stop: function(event, ui) {
},
// Set the rotation center at (25%, 75%).
// angle: 0.2,
rotationCenterX: 25.0,
rotationCenterY: 75.0,
transforms: {
translate: '(50%, 50%)',
scale: '(2)'
//any other transforms
},
};
$(document).on('click', '.block-add', function () {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class=""><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.rotatable(params).find('.blocks:first').resizable({ handles: "nw, sw, se, ne" });
// When rotating image its rotate from corner point of image .How to fix this ?
start, stop methods are not called when rotate using mouse wheel.
And how do I call rotate programmatically? Let's say if I have a input box and when I add rotation angle into it how would I change the rotation?
I tried using this plugin and use css transform to apply zooming. After zooming the rotation flickers and doesn't work smoothly.
I have attached a jsfiddle for example
https://jsfiddle.net/pj0fLxdk/
Make a release version so that it can be added to CDN's
When passing wheelRotate: false in options, moving the wheel still rotates the element.
In example of transform parameter there is unnecessary bracket. User should enter transform value without bracket to make it work.
Hi there,
Please can you tell me if I can use the target element that is being rotated as the handle too?
I have the following markup:
<div><img /></div>
I want to rotate the img and use it as the handle at the same time. It appears to work when I reference it as the handle:
img.attr('data-edit-status', 'rotating').rotatable({ degrees: currentRotation, handle: img, stop: function (event, ui) { currentRotation = ui.angle.degrees } })
but when I try and destroy the rotation it fails:
$('img[data-edit-status="rotating"]').rotatable('destroy')
Many thanks in advance.
Math.abs gives the wrong deg result as you can see here
https://jsfiddle.net/unloco/13sgedLn/12/
I don't understand why it was used, I forgot all about trig
Hello there, nice plugin !
One thing I just recognize is that wheelRotate don't care about step option - or at least it's not correct.
What is a good way to fix that?
Thank you!
Currently there is no way to set the angle in deg , it is always rad, please show a working example.
I have setup a fiddle http://jsbin.com/gasolo/edit?html,js,output to replicate this issue.
When the option wheelRotate
is set to false, it still rotates when the wheel is rotated on the element.
How can I rotate an object while clicking on a button with some predefined angle instead of using the handle? Actually I need both features that user should be able to rotate object (an image etc) through handle by using mouse and also by entering value of angle in text box and clicking on button.
I want to drag a div in another div. I mean it should be draggable in side that div only.
How can I achieve it?
Thanks in advance.
the rotate center was changed after drag end.
If one monitors the angle in say, the console, the angle (I've converted to degrees for legibility) is all over the place in terms of numbers.
Instead, limit the angle reported from 0 to 360.
I was hoping this would work out of the box with packering, this is not the case. Would be nice to have a library that plugs into jqueryui seamlessly so....
Lets see if we can make it work then shall we, issue opened for attention, suggestions and note keeping.
Some issues so far:
Here is a codepen as an example implementation with draggable, resizable and rotatable. Using jqueryui 1.11.2.
Any suggestions?
I would like the functionality to resize from all four sides of the div.
There is a wheelRotate option but it does not apply to Scroll Whell rotation when hovering. Is there a way to actually disable an object to rotate (with scroll wheel) when hovered?
Is it possible to use this on a div background image? idea is to reposition, rotate, resize the div background image right on the webpage dynamically. I found https://github.com/kentor/jquery-draggable-background which is really cool. Was wondering if rotatable could work that way
Hi!
I don't if it is possible to do it with this plugin, if you will implement it or if I have to manually modify the source code, but what I'm looking for is a way to configure a start degrees and an end degrees values to allow rotation from 3º to 356º (for example), but if it arrives to 0º, rotate to 0º.
This could be usefull if you don't want that the user that will rotate the element has to extrictly rotate the element to 0º. E.g.: when 356º is reached, prevent rotation until it arrives to 0º. If 0º is reached, rotate element to 0º and prevent rotation until it goes again to 3º or 356º. Even if you set step: 1
and snap: true
it would be a good implementation, so they can't miss to "reset" the rotation.
Thanks in advance.
Regards,
Daglimioux.
i've got code that looks like this and when i rotate the element with my scroll wheel these don't fire. is there something i'm doing wrong in the set up?
$("#nftInner").rotatable({
wheelRotate: true,
rotate: function (event, ui) {
// todo: make this a timeout. stop() is not called on wheel
updateFirebaseTransform({ radians: ui.angle.current });
},
radians: pageData.transform.radians,
start: function(event, ui) {
$(this).addClass("dashed-boder"); // Not firing
},
stop: function(event, ui) {
$(this).removeClass("dashed-boder"); // Not firing
}
});
Hi Guys,
i have some wired Problems with the rotatable Plugin.
This happens also on the normal demo page.
http://godswearhats.com/jquery-ui-rotatable/demo.html
When i start to drag and then rotate all look fine but when i try it a second or third time the rotation is really wired. Look at the Video:
https://youtu.be/AQqBJRco7VE
I hope someone can fix this.
Thank You,
Daniel
Can the rotation be restricted to degrees say 0, 90, 180, 270, 360?
Handle doesn't disappear when elem.rotatable('disabled') is called. The rotation is disabled but the handle remains.
When passing wheelRotate: false in options, moving the wheel still rotates the element.
Chromium Version 52.0.2743.116 Built on Ubuntu , running on LinuxMint 17.2 (64-bit)
The current implementation on CDN has an angle
option that uses radians.
Not degrees, as mentioned in the readme.
Initialized with option angle : 0 and rotatable stopped woking.
However I found a working fix.
In line 37
change this if(this.options.angle != false)
TO THIS if(this.options.angle !== false)
Hi there,
Nifty little plugin!
I noticed that when using rotatable({disabled:true})
and rotatable('enable')
, the plugin adds and removes the correct CSS-class state (.ui-rotatable-disabled
).
That said, the respective element is, in fact, still rotatable despite the following code:
rotateElement: function(event) {
if (!this.element || this.element.disabled) {
return false;
}
[...]
Not sure why it isn't working, but maybe the disabled-flag is stored in an options
object attached to the DOM element rather than the disabled
property directly on it?
Is there a way to rotate a targeted element in code?
What I'm trying to do: allow the user to freely rotate an element, but then swing back to a certain set of positions when released. Is there a way to make the element rotate automatically?
Hi is there a way to make this mobile please? Thanks
Rotatable is completely awesome thank you for your efforts. I'm trying to use the plugin for a web app that's destined for an iPad. Testing on desktop browsers works perfectly. Unfortunately, i'm not able to get rotation to work on the iPad. When I tap and drag on the rotation handle, nothing happens. I tried the obvious replacement of mouse triggers with touch triggers (touchstart, touchmove and touchend)...this did not do the trick. Any insight you can provide is very much appreciated.
Thanks again
Hello,
I have just used this great widget for a client-side layout designer jquery plugin, and I needed the feature of rotating elements in it. I also needed an additional feature, that Shiftkey snaps the angle on rotate event to the nearest 45 degree.
I was just wondering if you could use my solution to improve the widget with the following snippet (rotateElement function):
After the row
var rotateAngle = mouseAngle - this.mouseStartAngle + this.elementStartAngle;
insert the following:
if(event.shiftKey){
var degree = rotateAngle * (180/Math.PI);
var closestStep = 0;
var step = 45; // it could be an input option to the widget
var dist = degree%360%step;
var gap = step - Math.abs(dist);
if(Math.abs(dist) < gap){
closestStep = (degree - dist) * (Math.PI/180);
}
else if(Math.abs(dist) >= gap){
if(dist < 0){
closestStep = degree - gap;
}
else if(dist > 0){
closestStep = degree + gap;
}
else{
closestStep = degree;
}
closestStep = closestStep * (Math.PI/180);
}
rotateAngle = closestStep;
}
Hi again!
Would be nice to set a return false;
on the start
function event to stop rotation if a condition is met. I'm trying to do it now, but it doesn't stop rotating the element. It just prevents the custom function execution, but not the rotation (like with jQuery UI resizable).
Thanks in advance.
Best regards,
Daglimioux.
Hi,
I added some code for setting the center of rotation, and since I am new to github I could not figure out how I helped out in your piece of code here.
Instead I made a fork, which can be found here:
https://github.com/Snorvarg/jquery-ui-rotatable
Feel free to use it if you find it usable!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.