CODEWITHSUNDEEP
javascriptjquery
David Biga
David Biga

Reputation: 2801

Rotating a .draggable() div - JQuery

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

Upvotes: 1

Views: 662

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

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

Upvotes: 3

Related Questions