JQuery is dragging when the div rotates

Question

Help solve the problem, I solved the problem with the jumping layer when dragging and dropping a div to some extent, I found a solution here - Webkit and jQuery draggable jumps , but when I rotate the div 90 degrees, it does not move to the edge of the parent div. How to make it so that it can be moved to the right edge of the parent div.

Additional 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 I already found:

  $(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's a link for a demo http://jsfiddle.net/fgybyem2/7/

Answer 1

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