jqui图片旋转后每次拖动位置变化、

Question

有一个图片要求可以旋转 可以拖动和缩放。 但是每次旋转之后再次拖动会往左上角跳动一下。不知道什么原因
下面上代码

 $( ".draggableImage" ).draggable({
            cancel: "i.route",
            containment: "#droppable", 
            start: function( event,
            ui) {  
            $('.allstyles').css('display','none')
            $('.draggableImage').children('.route').css('display','none')
            $(".draggableImage").RotateH({trigger:$(".route"),debug:true});
        },
            stop:function(event, ui ){   
                    var hights = $('.draggableImage').css('top')
                    $('.allstyles').css('display','block')
                    $('.allstyles').css('top',hights)                               
                 $(".draggableImage").RotateH({trigger:$(".route"),debug:true});
                  $('.draggableImage').css('border','1px dashed #888').children('.route').css('display','block')               
        }
 })
 
     $( ".draggableImage" ).resizable({
                maxHeight: 200,
                maxWidth: 200,
                minHeight: 50,
                minWidth: 50,
                containment: "#droppable", 
                aspectRatio: 1 / 1,
                resize:function( event, ui ){ 
                },
                stop:function(ev,ui){
                     $(".draggableImage").RotateH({trigger:$(".route"),debug:true});
                }
   });
 还有图片旋转的插件代码 在站上找的一个大神的代码
     (function($){
    $.fn.RotateH=function(options){
        var defaults={
            trigger:document,           //拖动按钮 默认 整个文档
            centerX:0,                      //圆心点x 默认 对象中心x
            centerY:0,                      //圆心点y 默认 对象中心y
            //inertia:true, 惯性旋转 开发中
            debug:false
        },_this=this;
        var ops=$.extend(defaults,options);

        $('.route').mousedown(function(ev){
         ev.preventDefault();
          })
        //初始化
        function Init(){
            //初始化圆心点
            if(ops.centerX==0 && ops.centerY==0){
                ops.centerX=_this.offset().left+_this.width()/2;
                ops.centerY=_this.offset().top+_this.height()/2
            }
            $(ops.trigger).bind("mousedown",function(event){
                // alert(12)
                 
                $(document).bind("mousemove",movehandle);
            });
            $(document).mouseup(function(event) {
                $('.route i').css('display','none')
                $(document).unbind("mousemove");
                if(ops.inertia)inertiaShow();
            });
        }
        //鼠标移动时处理事件
        function movehandle(event){
             event.preventDefault();
                event=event || window.event;
               var dis = angle(event.clientX,event.clientY,ops.centerX, ops.centerY);
              
                if(ops.debug)
                    // console.log(ops.centerX+"-"+ops.centerY+"|"+event.clientX+"-"+event.clientY+" "+dis);
                rotate(dis);
                var zhengshu = parseFloat(dis)
                 zhengshu = Math.round(dis)
                // console.log(zhengshu)
                 $('.route i').css('display','block')
                $('.route i').html(zhengshu+'°')
        }
        //计算两点的线在页面中的角度
        function angle(centerx, centery, endx, endy) {
            var diff_x = endx - centerx,
                diff_y = endy - centery;
            var c=360 * Math.atan2(diff_y , diff_x) / (2 * Math.PI);
                c=c<=-90?(360+c):c;
               
                return c+90;
               
        }
        //惯性旋转
        function inertiaShow(angle){                           
        }
        //设置角度
        function rotate(angle,step){
            $(_this).css("transform", "rotateZ(" + angle + "deg)");
             
        }
        Init();
    };
})(jQuery);

这是样式。把定位改成相对定位后就正常了 但是旋转又出了为问题。 求大神解决
插件的absoult;跟jqui的relative怎么兼容、

Answer 1

看看 拖拽旋转时是不是出现滚动条了！

Answer 2

想知道你用的啥插件进行图片旋转