Question

我试图在Project中拖动一个可旋转的div时，我有一种奇怪的行为。我不确定这个问题是否与Jquery UI或其他东西有关。

转到我的项目，单击黑色方块（在左侧工具栏中），然后单击左侧工具栏上的简单边缘箭头按钮。然后尝试旋转它并在尝试拖动它（它跳转）。

按下“添加简单箭头”按钮时执行的操作是：

var $myArrow = $('<div class="ui-widget-content sArrow" style="display:inline-block"><img id="bli" width="150px;" heigth="150px;" src="images/1.png"/></div>');

    $myArrow.css("position","absolute");
    $($myArrow).rotatable(params);
    $myArrow.draggable();
    $('#canvas').append(myArrow);

这是CSS：

.sArrow
{
   border-radius: 5px;
   border: 5px solid;
   border-color: #FFFFFF;
   position:absolute;
   display:inline-block;   
}

我一直在努力解决这个问题2天，我仍然不知道如何解决它。 Jquery UI可以旋转specification，比如你在div中创建一个div，你可以旋转的内部div和你可以拖动的外部，我尝试制作这个但是这个奇怪的跳跃仍然发生（我不知道是否我做错了，或者它不是Jquery UI问题）。

Answer 1

好的，刚刚通过更好的教程解决了它。我首先必须创建一个div来包装可旋转元素，然后我必须使这个div可拖动。显然这是与Jquery UI主题相关的一些问题。所以新代码看起来像这样：

        var auxD = "dsA"+qtdSA;
        var auxR = "rsA"+ qtdSA;
        var rot = $('<div style="display:inline-block;"><img width="150px;" heigth="150px;" src="images/1.png"/></div>')
        var wrap = $('<div class="sArrow" style="display:inline-block;"></div>');
        rot.attr("id",auxR);
        wrap.attr("id",auxD);
        wrap.append(rot);
        if(qttProcesses > 0){
            $('.process').first().before(wrap); 
        }
        else{
            canvas.append(wrap);
        }
        $(document).ready(function(){
                var params = {
                start: function(event, ui) {
                console.log("Rotating started");
            },
            rotate: function(event, ui) {
                console.log("Rotating");
            },
            stop: function(event, ui) {
                console.log("Rotating stopped");
            },
        };
        $('#'+auxR).rotatable(params); 
        $('#'+auxD).draggable();
        $('#'+auxD).css("position","absolute");
        qtdSA = qtdSA+1;
    });

Jquery UI可旋转 - 拖动时突然跳跃

1 个答案: