Question

请帮助解决问题，我解决了跳转图层的问题，在某种程度上拖动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/

Answer 1

您必须删除此部分（包含：＆＃34;＃template＆＃34;，）

div旋转时jQuery可拖动跳转

1 个答案: