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

Question

我有一个奇怪的行为，而试图德拉格在我的项目旋转div。我不确定这个问题是否与Jquery或其他相关。

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

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

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;   
}

我已经为这个问题挣扎了两天了，我仍然不知道如何解决它。Jquery可旋转的规格说明，比如在div内创建div，使内部div可旋转，使外部可拖动，我尝试这样做，但这种奇怪的跳转仍然发生(我不知道我是不是做错了，或者不是Jquery问题)。

Answer 1

好的，只是通过更好地遵循他们的教程来解决这个问题。我首先必须创建一个div来包装可旋转的元素，然后我必须使这个div可拖放。显然，这是一些与Jquery主题相关的问题。因此，新代码看起来如下：

        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;
    });