如何使用 jQuery ui 可旋转插件即时设置旋转度数？答案

【问题标题】：How to set rotate degree on the fly by using jQuery ui rotatable plugin?如何使用 jQuery ui 可旋转插件即时设置旋转度数？
【发布时间】：2020-07-31 07:34:59
【问题描述】：

我正在使用 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});
        });

【问题讨论】：

标签： javascript jquery jquery-ui jquery-rotate

【解决方案1】：

这里是解决方案：jsfilddle example

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

【讨论】：