div旋转时jQuery可拖动跳跃答案

【问题标题】：jQuery draggable jumping when div have rotatediv旋转时jQuery可拖动跳跃
【发布时间】：2015-07-01 10:54:36
【问题描述】：

请帮忙解决问题，我解决了在一定程度上打开拖动div时跳层的问题，我在这里找到了解决方案-Webkit and jQuery draggable jumping，但是当我将div打开90度时，它并没有移动到父 div 的边缘。如何使它可以移动到父 div 的右边缘。

更多信息：

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

我已经找到的解决方案：

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

这里是演示链接http://jsfiddle.net/fgybyem2/7/

【问题讨论】：

标签： jquery html css rotation draggable

【解决方案1】：

您必须删除此部分（包含：“#template”，）

【讨论】：