javascript - ドラッグ可能と回転の使用 - JQuery

Question

draggable()JQuery でローテーション機能を使用しようとすると、問題が発生しました。ユーザーがdivをクリックしてドラッグすると、うまく機能します。しかし、ユーザーがクリックしただけでは、少し回転します。まったく回転している場合は、div をドラッグしようとすると、少し跳ね上がります。これがなぜなのかよくわかりませんか？

適切なものを受け取っていないことに関係していると思いleft、topdivで定義しました。あなたのアイデアを教えてください。

コード：

$( "#draggable" ).draggable(); <-- implementation of the draggable feature in JQuery UI

アップデート：

そのため、ユーザーがボタンなどをクリックしたときに基づいて移動および回転するカスタムの回転および移動機能があります。これを使用して移動/回転すると、ジャンプしなくなりました。マウスを使用して回転およびドラッグした場合にのみジャンプします。(回転しない場合は、マウスを使用してドラッグします。正常に動作します)

移動/回転機能の一部のコード例:

if(direction == "big")
    {
        //get last x and y cordinates
            var x = $("#draggable").css('left');
            var y =$("#draggable").css('top');

        function drawBig() {
            //define new font size
            howMuch = startFontSize + howMuch;
            //define var with new font size
            startFontSize = howMuch;

            //define text font size and family
            ctx.font = howMuch + 'px ' + fFamily;
            //fill with the text
            ctx.fillText(text, 10, 100);
            //draw text
            ctx.globalCompositeOperation = 'source-in';

            ctx.drawImage(img,10, 20, 500, 100);
        }
        //get values
        var current = $(".activeText a div").attr('id');
        var text = $("#fontEnter").val();
        //get font family
        var fFamily = $(".activeText a .fontType-cont").val();
        // default remove old
        $(".customize-Container #draggable").remove();
        //create a canvas for image converting
        $(".customize-Container").append("<div id='draggable'><canvas id='"+current+"'></canvas></div>");
        //create canvas
        var canvas = document.getElementById(current),
        ctx = canvas.getContext('2d'),
        img = document.createElement('img');


        //draw it
        img.onload = drawBig;
        if($(".activeGColor").find('img').attr('src'))
        {
            img.src = $(".activeGColor").find('img').attr('src');   
        }
        else // <!-- default color = metallic
        {
            $(".graphicsDrop").text("Metallic");
            img.src = '../wp-content/themes/twentytwelve/controller/custamizeStyle/swatches/Metallic.png';
        }

        //change where draggable is located:
        $( "#draggable" ).css('top' , y);
        $( "#draggable" ).css('left' , x);

        //check rotation
        if (rotation != 0)
        {
            $("#draggable").css({ transform : 'rotate('+ rotation +'deg)' });
        }
        $( "#draggable" ).draggable();
    }

#draggable コンテナもドラッグ可能になり、ユーザーは私が作成したパッドまたはマウスを使用できることに注意してください (回転したときに div がジャンプするのは、マウスを使用する場合のみです)。