Jquery UI Rotatable - sudden jump while dragging

Question

I'm having a weird behaviour while trying to dragg a rotatable div in my Project. I'm not sure if this problem is related with Jquery UI or something else.

Go to my project, click the black square(in left toolbar), then click the simple edge arrow button on the left tool bar. then try rotating It and after try to drag It (It jumps).

The action exectuted when the "add simple arrow" button is pressed is 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 with this problem for 2 days and I still don't know how to solve It. The Jquery UI rotatable specification, say that you create a div inside a div, the inner div you make rotatable and the outer you make draggable, I tryied making this but this weird jump still happens (I don't know if I'm doing It wrong, or It is not a Jquery UI problem).

After rotating, you need to set a new starting point for the draggable object to avoid that jump I guess. Try this solution: http://stackoverflow.com/questions/1271817/jquery-ui-draggable-how-to-get-drag-start-position If you want people to go further with helping you out, you might want to set up us a fiddle. — ggzone, Jun 15 '15 at 13:08

Rafael · Accepted Answer · 2015-06-16T14:04:20.667

Ok, just solved It by following better their tutorial. I first had to create a div to wrap the rotatable element and then I had to make this div draggable. apparently this is some problem related to Jquery UI theme. So the new code looked like 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;
    });

Jquery UI Rotatable - sudden jump while dragging

1 Answers1