Rotating a .draggable() div - JQuery

Question

I came across an issue when applying a .draggable() while also using a function that will rotate the div when user clicks it:

//functions for roating text contianer jQuery.fn.rotate = function(degrees) { $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)', '-moz-transform' : 'rotate('+ degrees +'deg)', '-ms-transform' : 'rotate('+ degrees +'deg)', 'transform' : 'rotate('+ degrees +'deg)'}); }; $('#draggable').click(function() { rotation += 5; $(this).rotate(rotation); });

the #draggable is appeneded to a container after a certain function is executed, using Jquery to append(....) the div into the container; I apply the .draggable() function to it.

$(".customize-Container").append("<div id='draggable'><span id='"+current+"'></span></div>"); .... $( "#draggable" ).draggable();

I am not sure if this is because it does not exist and than when JQuery appends it, it still stays hidden or what.

I have tried this function on other divs that are populated into the webpage and it works wonderful. Let me know your ideas.

David

Depends on the jQuery v. you use, but thankfully you don't need all those browser-specifics, just transform (the last one) — Roko C. Buljan
– Roko C. Buljan, Commented Jul 9, 2013 at 15:29

Roko C. Buljan · Accepted Answer · 2013-07-09 15:32:30Z

Hope this helps

jQuery.fn.rotate = function(degrees) { $(this).css({ transform : 'rotate('+ degrees +'deg)' }); }; var rotation = 0; $('.customize-Container').on('click', '#draggable', function() { rotation += 5; $(this).rotate(rotation); });

@DavidBiga don't be afraid, if you use an up-to-date jQuery version this is all you need

Collectives™ on Stack Overflow

Rotating a .draggable() div - JQuery

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related