Question

我尝试使用draggable()并在JQuery中使用旋转功能时遇到了一个问题。以下是当用户点击div并拖动它时，它运行良好。但如果用户只是点击它会旋转一点。如果它完全旋转，当你试图拖动div时，它会跳起一点点。我不确定为什么会这样？

我认为它与我有关，而不是接收我在div上定义的left和top。让我知道你的想法。

代码：

$( "#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会跳起来。）

使用draggable和rotation - JQuery

0 个答案: