jQuery Drag resize neighbouring DIVs

Question

Please refer to this fiddle first:

I am writing a coding which enable user to drag the middle div[white color as in the fiddle.] What i want originally is when dragging the white portion upward will make the height of green color div decreased while the blue color div's height will increase.

But it ends up like in the example, the draggable white div like lost control and just go upward/downward lightning fast and over the parent wrapper. You may try to edit the code by comment out this 2 lines in javascript

$('#draggable_0').height(div1H);
$('#draggable_2').height(div3H);

Then the dragging function is acting like normal and will be contained within its parent.

How to solve this please anyone? To make the dragging and also the the green and blue div acting normal.

Thank you.

score 2 · Accepted Answer · answered Sep 12 '13 at 08:50

2

The .draggable position is relative

So when you modify the #draggable_0 height, the position of .draggable will be relative to the #draggable_0.

change the css :

.draggable  
{  
    height:20px;  
    width:130px;  
    cursor:pointer;  
    border:1px solid #000000;  
    background-color:#ffffff;  
    position:absolute;  
}

answered Sep 12 '13 at 08:50

dann

853
5
17

briliant! May I ask you 1 more question please? If i wanted the white draggable div can only drag until the word "dadada" in green div, which mean unable to touch the border of the div, how can I do so please? Thank you. – Fei Hap Lee Sep 12 '13 at 09:08
I just found out that the word "hehehe" in blue div is convered by the white div. How to show it up please? – Fei Hap Lee Sep 12 '13 at 09:11
I solved it after posting another question here. http://stackoverflow.com/questions/18765616/jquery-draggable-div-position-misplaced – Fei Hap Lee Sep 13 '13 at 00:32

jQuery Drag resize neighbouring DIVs

1 Answers1