jQuery Draggable div位置错误 [英] jQuery Draggable div Position misplaced

问题描述

在这个工作示例中，我编写了自己的编码.

I wrote my own coding as in this working example.

http://jsfiddle.net/uKqta/

有2个问题需要我指导:

There are 2 problems which I need some guidance on:

1. 可拖动的div应该不能拖动到顶部并触摸边框.它应该只停留在顶部div的最小高度所在的位置.

1. The draggable div should not be able to drag to the top and touch the border. It should just stop at the point where the top div's minimum height is.

 min-height:50px;

可拖动div实际上并未与黄色底部div粘在一起.它最初位于底部div的顶部.这意味着3个div:顶部div，可拖动div和底部div必须垂直对齐.

The draggable div is actually not stuck together with the yellow bottom div. It is originally located on top of the bottom div. Which means 3 divs: top div, draggable div and bottom div must be aligned vertically.

JS:

$(function () {
    $("#draggable").draggable({
        drag: function () {
            var position = $("#draggable").position();
            var topPos = position.top;
            var divHeight = 500;
            var div1H = topPos;
            var div3H = divHeight - topPos;
            $('#div1').height(div1H);
            $('#div3').height(div3H);
        },
        axis: "y",
        containment: "#divAll"
    });
});

HTML:

<div id="divAll">
    <div id="div1">
        <table id="tbl1">
            <tr>
                <td>top top top</td>
            </tr>
        </table>
    </div>
    <div id="draggable" class="handler_horizontal"></div>
    <div id="div3">
        <table id="tbl2">
            <tr>
                <td>bottom bottom bottom</td>
            </tr>
        </table>
    </div>
</div>

CSS:

#divAll {
    height:500px;
    width:500px;
    border:1px solid blue;
    position: relative;
}
.handler_horizontal {
    width:100%;
    height: 8px;
    cursor: row-resize;
    left: 0;
    background: url(http://jsfiddle.net/img/handle-h.png) 50% 3px no-repeat;
    border:1px solid grey;
    margin-bottom:50px;
    position:absolute;
}
#div1 {
    height:60%;
    width:100%;
    border:1px dotted green;
    overflow:auto;
    min-height:50px;
    max-height:450px;
    background-color: #eee;
}
#div3 {
    width:100%;
    height:37%;
    border:1px dotted red;
    overflow:auto;
    min-height:50px;
    max-height:450px;
    background-color: yellow;
}
#tbl1, #tbl2 {
    word-wrap:break-word;
}

推荐答案

我已替换

axis: "y",
containment: "#divAll" 

通过

containment:[ 9, 50, 9, 450 ]

其中包含:[xLeft，yTop，xRight，yBottom] 这样，可拖动的顶部不会超过50px，底部不会超过50px.而保持9px(这将使您的垂直对齐)

where containment:[ xLeft, yTop, xRight, yBottom ] This way, draggable will not go above 50px on top and under 50px on bottom. And while stay at 9px (this will do your vertical align)

小提琴: http://jsfiddle.net/uKqta/4/

这篇关于jQuery Draggable div位置错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！