Как установить угол поворота на лету с помощью подключаемого модуля jQuery ui rotatable?

Question

Я использую плагин jQuery UI Rotatable, чтобы иметь возможность вращать динамически созданные объекты. Кажется, я не могу заставить его работать. Какие-нибудь мысли?

Вот мой код и jsfiddle

HTML:

<div id="container"></div>

JS:

var ajax_response=[
            {title:'HDMI',style:{transform:'rotate(22.5deg)',width:'25%', height:'5%',letf:'58.2627%',top:'7.29814%' }},
            {title:'Silent',style:{transform:'rotate(22.5deg)',width:'25%', height:'5%',letf:'0%',top:'7.29814%' }}
        ];
        $(ajax_response).each(function(index,item){
            $('#container').append('<div class="slots" style="width:'+item.style.width+'; height:'+item.style.height+'; left:' + item.style.left + '; top:' + item.style.top + '; transform:'+item.style.transform+'">'+item.title+'</div>')
        });
        $('#container').find('.slots').each(function(){            
        $(this).rotatable({degrees:$(this)[0].style.transform});
        });

Answer 1

Вот решение: пример jsfilddle

JS:

$(document).ready(function(){
 var ajax_response=[
            {title:'HDMI',style:{transform:'rotate(22.5deg)',width:'25%', height:'5%',letf:'58.2627%',top:'7.29814%' }},
            {title:'Silent',style:{transform:'rotate(22.5deg)',width:'25%', height:'5%',letf:'0%',top:'7.29814%' }}
        ];
        $(ajax_response).each(function(index,item){
            $('#container').append('<div class="slots" style="width:'+item.style.width+'; height:'+item.style.height+'; left:' + item.style.left + '; top:' + item.style.top + '; transform:'+item.style.transform+'">'+item.title+'</div>')
        });
       
        $('#container').find('.slots').each(function(){              
        $(this).rotatable({degrees:getRotationDegrees($(this))});
        //$(this).rotatable({degrees:20});
        });
         //$('#container').find('.slots').rotatable();
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform")    ||
obj.css("-ms-transform")     ||
obj.css("-o-transform")      ||
obj.css("transform");
if(matrix !== 'none') {
    var values = matrix.split('(')[1].split(')')[0].split(',');
    var a = values[0];
    var b = values[1];
    var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }

if(angle < 0) angle +=360;
return angle;
}        
});