jqueryui resizeable and draggable element is covered

Question

I have two elements which are draggable and resizeable. They are aline horizontally. My problem is when I attempted to resize the first element at the top, the second element position below will automatically cover the first element.

Below is the style:

<style>
    #request-grid { width: 500px; min-height: 200px; margin: 10px; padding: 0.5em;}
    #bb-clist { width: 500px; min-height: 200px; margin: 10px; padding: 0.5em;}
    .ui-resizable-helper { border: 2px dotted #00F; }
</style>

Below is the jqueryui code:

$( "#request-grid" ).draggable({containment: "#content", scroll: true, stack: "#content div" });
$( "#bb-clist" ).draggable({containment: "#content", scroll:true, stack: "#content div"});

$( "#request-grid" ).resizable({
helper: "ui-resizable-helper",  containment: "#content"
});

$( "#bb-clist" ).resizable({
helper: "ui-resizable-helper", containment: "#content"
});

Below is the html element:

<div id="request-grid" class="ui-widget-content">
</div>

<div id="bb-clist" class="ui-widget-content">
</div>

How will I solve this problem without the other element covering/overlapping the other element when resizing.

Thanks.

@ArunPJohny Can you please point me what changes you made? I cannot seem to figure out. thanks. — Pelang, May 03 '13 at 05:31

score 2 · Accepted Answer · answered May 03 '13 at 06:58

HTML

<div>
    <div id="request-grid"></div>
    <br/>
    <div id="bb-clist"></div>
</div>

CSS

#request-grid {
    height:100px;
    width: 200px;
    min-height: 100px;
    margin: 10px;
    padding: 0.5em;
    background-color:pink;
}
#bb-clist {
    height:100px;
    width: 200px;
    min-height: 100px;
    margin: 10px;
    padding: 0.5em;
    background-color:blue;
}
.ui-resizable-helper {
    border: 2px dotted #00F;
}

jQuery

$(document).ready(function () {

    $("#request-grid").draggable({
        containment: "#document",
        scroll: false,
        stack: "#content div"
    });
    $("#bb-clist").draggable({
        containment: "#document",
        scroll: false,
        stack: "#content div"
    });

    $("#request-grid").resizable({
        helper: "ui-resizable-helper",
        containment: "document",
        resize: function (event, ui) {
            var height = (ui.size.height + 'px');
            $('#bb-clist').css('posotion', 'absolute').css('top', height);
        },
        stop: function (event, ui) {
            var h2 = (ui.size.height);
            if (h2 < 200) {
                h2 = 100; // set default min-height if re-sized less than min-height.
            }
            $('#bb-clist').css('posotion', 'absolute').css('top', h2);
        }

    });

    $("#bb-clist").resizable({
        helper: "ui-resizable-helper",
        containment: "document"
    });
});

Working Demo http://jsfiddle.net/cse_tushar/qkKV6/

score 0 · Answer 2 · answered May 03 '13 at 05:24

0

You can use a z-index value to overcome the overlapping issue.

simply put a higher z-index value to your resizable element like,

#ResizableElement
{
  z-index: 10;    //default is 1
}

an element with higher z-index value will always overlap other element. you can also set a z-index value to your draggable element which will work too.

$("#request-grid").draggable({ zIndex: 10 });

answered May 03 '13 at 05:24

Rohit416

3,416
3
24
41

both elemets are resizeable and draggable will it work? I assume both of them will have the same zIndex. – Pelang May 03 '13 at 05:27
i think that case might not work, i am not sure. i could'nt able to edit my response due to time shortage but i guess you have find the solution :) – Rohit416 May 03 '13 at 09:03

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

I was able to solve the problem using the solutions from these questions Restrict jQuery draggable items from overlapping/colliding with sibling elements and Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options)

I was not using the term collision when searching my problem at first.

edited May 23 '17 at 12:06

Community

1
1

answered May 03 '13 at 06:06

Pelang

421
7
19

that is good if it worked for you. please accept a response which worked for you so others can take benefit from it. – Rohit416 May 03 '13 at 09:04

jqueryui resizeable and draggable element is covered

3 Answers3

HTML

CSS

jQuery