JQuery UI Rotatable - внезапный прыжок при перетаскивании

Question

У меня странное поведение, пытаясь перетащить вращающийся div в моем Project. Я не уверен, связана ли эта проблема с JQuery UI или чем-то еще.

Перейдите в мой проект, щелкните черный квадрат (на левой панели инструментов), затем нажмите кнопку простой кнопки со стрелкой на левой панели инструментов. затем попробуйте повернуть его и попробуйте перетащить его (он прыгает).

Действие exectuted при нажатии на кнопку «добавить простую стрелку» это:

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 rotatable specification, скажем, что вы создаете div внутри div, внутренний div, который вы делаете вращающимся, и внешний, который вы делаете перетаскиваемым, я попытался сделать это, но этот странный прыжок все еще случается (я не знаю, выполняю ли я Это неправильно, или это не проблема с JQuery UI).

Answer 1

Хорошо, только что решил Это, следуя за их руководством. Сначала мне нужно было создать div, чтобы обернуть вращающийся элемент, а затем мне пришлось сделать этот div draggable. по-видимому, это проблема, связанная с темой 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; 
    });