jQuery Draggable div Position misplaced

Question

I wrote my own coding as in this working example.

There are 2 problems which I need some guidance on:

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

EdenSource · Accepted Answer · 2013-09-12T14:34:29.860

2

I replaced

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

by

containment:[ 9, 50, 9, 450 ]

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)

Fiddle :http://jsfiddle.net/uKqta/4/

edited Sep 12 '13 at 14:34

answered Sep 12 '13 at 14:29

EdenSource

3,387
16
29

I never know I can change the containment to values, maybe I didn't read it very thoroughly. Thanks a lot! – Fei Hap Lee Sep 13 '13 at 00:27
+1 nice one, I looked for something like containment in the docs but didn't see it – apaul Sep 13 '13 at 01:37

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

I would recommend replacing draggable with resizeable as its a little better suited for your needs.

Working Example

$(function () {
    $("#resizable").resizable({
        handles: "n",
        maxHeight: 450,
        minHeight: 50
    });
    $("#resizable").scroll(function () { // keep the handle at the top of the resizable
        $(".ui-resizable-handle").css('top', $("#resizable").scrollTop());
    });
});

You may also want to check this out, it looks like it may be your next step:
jQuery UI Resizable alsoResize reverse

edited May 23 '17 at 12:05

Community

1
1

answered Sep 12 '13 at 15:47

apaul

16,092
8
47
82

Thank you for your answer. Your answer did the trick too. But just a bit to be done. When i drag the div to the bottom, and i scroll down the bar in bottom div, the draggable div just dissapear. – Fei Hap Lee Sep 13 '13 at 00:30

jQuery Draggable div Position misplaced

2 Answers2

Linked