在IE中旋转图像问题＆lt; 9

Question

我正在尝试旋转图像，并使用Jquery UI调整大小/拖动。

适用于所有现代浏览器，但IE＆lt;图9的位置在移动然后使用滑块旋转时会出现问题。

我认为问题是我在IE函数中使用了obj.style.top和obj.style.left，这可能与jQuery中的position.left冲突了吗？

示例：

http://www.silverink.com/TEMP/rotateTest/

任何建议都会很棒。感谢

这是我正在使用的Javascript：

    var objsrc = $('#uploadedImage').attr('src');

    //Set variable for width and height of uploaded image
    var origWidth = ($('#uploadedImage').attr('width'));
    var origHeight = ($('#uploadedImage').attr('height'));

    //Set newWidth and newHeight initially to origWidth and origHeight
    var newWidth = origWidth;
    var newHeight = origHeight;

    //INITIAL POSITION VALUES
    var newPositionLeft = $('#uploadedImage').position().left;
    var newPositionTop = $('#uploadedImage').position().top;

    //set dimensions of drag div to be the same as the image div
    $("#dragDiv").css("width",origWidth).css("height",origHeight);

    //Set initial rotateVal
    var rotateVal = 0;

    //set Initial ScaleVal
    var scaleVal = 1;

//JQUERY ONLOAD
    $(document).ready(function() {          


    // DRAG //
    //Set dragDiv as draggable, then on drag set position of uploadedImage to reflect
     $("#dragDiv").draggable({ 
         cursor: 'move',
         start: function(event,ui) {
            $('#uploadedImage').stop().animate({opacity: 0.6}); 
            $('#fadeOutPng').stop().animate({opacity: 0.3});
         },
         drag: function(event,ui) {
            $('#uploadedImage').css("left",ui.position.left).css("top",ui.position.top);
            $('this').css("left",ui.position.left).css("top",ui.position.top);
         },
         stop: function(event,ui) {
            $('#uploadedImage').stop().animate({opacity: 1}); 
            $('#fadeOutPng').stop().animate({opacity: 1});

            // THESE 2 LINES KEEP THE IMAGE CENTRED ON THE MOUSE WHEN IT IS ROTATED... THE ROTATE FUNCTION REQUIRES AN UPDATED POSITION
            newPositionLeft = ui.position.left;
            newPositionTop = ui.position.top;

            $("#deBug").html("src="+objsrc+"<br />width="+newWidth+"<br />height="+newHeight+"<br />top="+$('#uploadedImage').position().top+"<br />left="+$('#uploadedImage').position().left + "<br />newPositionLeft="+newPositionLeft+"<br />newPositionTop="+newPositionTop+"<br />Rotate val="+rotateVal+"<br />"+ui.position.left);
         }
     });

        // ROTATE SLIDER //
        $("#rotateSlider").slider({
        range: "max",
        min: 0,
        max: 360,
        step: 10,
        value: 0,
        slide: function( event, ui ) {
            rotateVal = ui.value;


            //IE ROTATE
            if(($.browser.msie) && (parseInt($.browser.version, 10) < 9)){
                    rotate(uploadedImage,ui.value,true,newWidth,newHeight);
                }
            //SAFARI GOOGLE ROTATE
            else if ($.browser.webkit) {
                $('#uploadedImage').attr('style','-webkit-transform: rotate('+rotateVal+'deg);').css("width",newWidth).css("height",newHeight).css("left",newPositionLeft).css("top",newPositionTop)
                }
            //MOZ ROTATE
            else if ($.browser.mozilla) {
                $('#uploadedImage').attr('style','-moz-transform: rotate('+rotateVal+'deg);').css("width",newWidth).css("height",newHeight).css("left",newPositionLeft).css("top",newPositionTop)
                }
            //CSS3 STANDARD ROTATE (IE9, OPERA)
            else{
                $('#uploadedImage').attr('style','transform: rotate('+rotateVal+'deg)').css("width",newWidth).css("height",newHeight).css("left",newPositionLeft).css("top",newPositionTop)
                };

            $("#deBug").html("src="+objsrc+"<br />width="+newWidth+"<br />height="+newHeight+"<br />top="+$('#uploadedImage').position().top+"<br />left="+$('#uploadedImage').position().left + "<br />newPositionLeft="+newPositionLeft+"<br />newPositionTop="+newPositionTop+"<br />Rotate val="+rotateVal);
            }
        });

        //set up resize slider
        $("#resizeSlider").slider({
        range: "max",
        min: 20,
        max: 100,
        value: 100,
        //step: 0.1,
        slide: function( event, ui ) {
            newWidth = (origWidth * (ui.value / 100));
            newHeight = (origHeight * (ui.value / 100));
            $('#uploadedImage').css("width",newWidth).css("height",newHeight);
            $('#dragDiv').css("width",newWidth).css("height",newHeight);
            scaleVal = ui.value/100;
        }
        });

 }); //END ONREADY FUNCTIONS



// IE ROTATE //
function rotate(obj, angle, centered, thisNewWidth, thisNewHeight){
   var rad = angle * Math.PI * 2 / 360,
      cos = Math.cos(rad),
      sin = Math.sin(rad);


   dragDiv.style.filter = obj.style['-ms-filter'] = 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + '); ';

   obj.style.filter = obj.style['-ms-filter'] = 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')';

   if (centered) {
      if (obj.style.position != 'absolute' && obj.style.position != 'fixed') obj.style.position = 'relative';

      //Set the rotating image top and left centered - it's the height minus the offsetheight (height from top to bottom as rotated) divided by 2 then add the new position top
      var newTop = newPositionTop + ((thisNewHeight - obj.offsetHeight) / 2);
      var newLeft = newPositionLeft + ((thisNewWidth - obj.offsetWidth) / 2);

      obj.style.top = newTop;
      obj.style.left = newLeft;

      dragDiv.style.top = newTop;
      dragDiv.style.left = newLeft;
   }
}

哦，如果代码是凌乱的话，请道歉，只是为了概念验证而嘲笑它！