0

draggable()我在尝试在 JQuery 中使用和拥有旋转功能时遇到了一个问题。这是发生的情况，当用户单击 div 并拖动它时，效果很好。但是如果用户只是点击它会旋转一点。如果它完全旋转，当您尝试拖动 div 时，它会向上跳跃一点。我不确定这是为什么？

我认为这与没有收到正确的left和top我在 div 上定义的有关。让我知道你的想法。

代码：

$( "#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 容器也变成了可拖动的，因此用户可以使用我创建的 pad 或鼠标（只有在使用鼠标时，div 才会在旋转时跳起来。）

4

0 回答 0