div旋转时jQuery可拖动跳转

Question

请帮忙解决问题,我在跳转div时解决了跳转层的问题,在某种程度上打开了div,我在这里找到了解决方案 - Webkit和jQuery draggable jump,但是当我把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/

Answer 1

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