html - Jquery UI Rotatable - sudden jump while dragging -


i'm having weird behaviour while trying dragg rotatable div in project. i'm not sure if problem related jquery ui or else.

go project, click black square(in left toolbar), click simple edge arrow button on left tool bar. try rotating , after try drag (it jumps).

the action exectuted when "add simple arrow" button pressed this:

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

and it's css:

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

i've been struggling problem 2 days , still don't know how solve it. jquery ui rotatable specification, create div inside div, inner div make rotatable , outer make draggable, tryied making weird jump still happens (i don't know if i'm doing wrong, or not jquery ui problem).

ok, solved following better tutorial. first had create div wrap rotatable element , had make div draggable. apparently problem related jquery ui theme. new code looked this:

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

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -