正確修復JQuery UI draggable跳動

by San-Kai Liao

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css">
<div id="pic"></div>

CSS

div {
    width: 100px;
    height: 50px;  
    background-color: green;
    /*
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    */
    position: absolute;
}

JavaScript

$(document).ready(function(){
    var deg = 60;
    $('#pic').css('-webkit-transform','rotate('+deg +'deg)');
    $('#pic').css('-o-transform','rotate('+deg +'deg)');
    $('#pic').css('-moz-transform','rotate('+deg +'deg)');
    $('#pic').css('transform','rotate('+deg +'deg)');
    $('#pic').resizable();    
    $('#pic').draggable({
            start: function(event, ui){
                var cssLeft = $(this).css('left').replace(/px/gi, "");
                var cssTop = $(this).css('top').replace(/px/gi, "");
                cssLeft =(cssLeft == 'auto')?0:cssLeft;
                cssTop =(cssTop == 'auto')?0:cssTop;
                var fixLeft = cssLeft - ui.position.left;
                var fixTop = cssTop - ui.position.top;
                $(this).attr('data-fixLeft',fixLeft);
                $(this).attr('data-fixTop',fixTop);                
            },
            drag: function(event, ui) {
                var fixLeft = parseFloat($(this).attr('data-fixLeft'));
                fixLeft = isNaN(fixLeft) ? 0:fixLeft;
                var fixTop = parseFloat($(this).attr('data-fixTop'));
                fixTop = isNaN(fixTop) ? 0:fixTop;
                ui.position.left += fixLeft;
                ui.position.top += fixTop;
            }
    });    

});