jQuery draggable jumping when div have rotate

Question

Please help solve the problem, I solved the problem with jumping layer when drag div with turning on some degree, I found the solution here - Webkit and jQuery draggable jumping, but when I turn the div on 90 degrees, it does not move to the edge of the parent div. How to make that it can be moved to the right edge of the parent div.

More information:

<div class="template" id="template">
    <div id="box">Some text!</div>
</div>

CSS:

.template {
    width: 400px;
    height: 255px;
    position: relative;
    margin: 16px;
    border: 1px dotted #777;
    overflow: hidden;
}

#box {
    width: 100px;   
    border: 1px solid;
    background-color: red;
    position: absolute;
    left: 75px;
    top: 75px;
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -sand-transform: rotate(90deg);
    transform: rotate(90deg);
    text-align: center;
    cursor: move;
}

Solution that I already find:

 $(document).ready(function () {
             var recoupLeft, recoupTop;
             $('#box').draggable({  
                 containment: "#template",
                 start: function (event, ui) {                     
                     var left = parseInt($(this).css('left'), 10);
                     left = isNaN(left) ? 0 : left;
                     var top = parseInt($(this).css('top'), 10);
                     top = isNaN(top) ? 0 : top;
                     recoupLeft = left - ui.position.left;
                     recoupTop = top - ui.position.top;
                 },
                 drag: function (event, ui) {
                         ui.position.left += recoupLeft;
                         ui.position.top += recoupTop;                     
                 }
             });
         });

Here link for a demo http://jsfiddle.net/fgybyem2/7/

Answer 1

you must remove this section (containment: "#template",)