div旋转时jQuery可拖动跳跃

Posted 2023-03-06

【中文标题】div旋转时jQuery可拖动跳跃

【英文标题】：jQuery draggable jumping when div have rotate

【发布时间】：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/

【参考方案1】：

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