javascript - 从输入框到 jQuery .rotatable 事件的自定义可旋转值

Question

开发可定制产品集成时，我有一个事件触发选项，可以使用 jQuery .rotatable 句柄旋转 Div 元素，效果很好。 .ui-rotatable-handle

触发的事件

但我需要使用 Inputbox 值来控制相同的旋转 Angular ，也就是说，当用户键入任何值时，它会动态影响使用 jQuery 绑定(bind) .rotatable 事件。

jQuery('.class').rotatable({ containment: "parent",
    wheelRotate: false,             
    stop: function(event, ui) {                 

        if(ui.angle.current<0){
            var given_angle = ui.angle.current+2*Math.PI;
        }else{
            var given_angle = ui.angle.current;
        }

        var new_angle = Math.round(given_angle*180/ Math.PI);
        if(new_angle){
            jQuery('#rotate_s').val(new_angle);
        }
    }
});

自定义触发器的 Html 输入框

jQuery('#rotate_s').keyup(function() {

        var rotate_u = jQuery(this).val();

 _//Required some code to reflect the existing rotatable event_

});

输入框

 <input type="text" name="rotate_s" id="rotate_s" value="0">

Answer 1

注意输入字段的变化，并向该元素添加一个类。

$( ".inputfield" ).change(function() {
  $(this).addClass('rotatable');
});

当然，rotatable 类应该有一些转换和转换 css 代码来旋转 div。