Question

I am using around 8-10 div elements..all are resizable and draggable.. now i want to avoid overlapping of each element on other during resizable or draggable..how i can i do that? I feel javascript,html,css, jquery code for me is more helpful..pls help me…part of the code for 2 elements will be like this…

<!--Reizable and draggable for the HEADER widget**************-->
$(function() {
        $( "#placeLabel" ).draggable();
        $( "#placeLabel" ).resizable({
                ghost: true,
                handles: "n, e, s, w"

                                  });
    });

<!--Reizable and draggable for the TWITTER widget**************-->
$(function() {
        $( "#twitterLabel" ).draggable();
        $( "#twitterLabel" ).resizable({
            ghost: true,
            alsoResize: '#twt',
            alsoResize: '#tweets',
                handles: "n, e, s, w"
                                  });
    });

Answer 1

It sounds like z-index in css could help you out, but I’m not sure if that works in this case since I don’t have any experience with draggables.

z-index:1; /* for the bottom div */
z-index:100; /* for the top div */

Have a try and see if it work.