0

I m a new comer for stack overflow. I need your help. I got jquery resize widget from online and tried to implement my source. It works fine only one widget. If i put the same resize function to multi widget in the same page, it gets overlapped while a widget resize. And one more information when i resize last widget, its not affected (overlapped) to others.

My code CSS

<style>
.widget1
{
    width:150px; min-height:120px; border:1px solid green;
}
.widget2
{
    width:150px; min-height:120px; border:1px solid blue;
}
.widget3
{
    width:150px; min-height:120px; border:1px solid black;
}
</style>

Js Used

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
    $(function() {
        $(".drag_resize").draggable().resizable();
    });
</script>

Html

<div class="widget1 drag_resize">
 Dummy contents 1
</div>
<div class="widget2 drag_resize">
 Dummy contents 2
</div>
<div class="widget3 drag_resize">
 Dummy contents 3
</div>
user1948446
  • 1
  • 1
  • 1

1 Answers1

0

Hi and welcome to stackoverflow! You're running into a z-index problem of the draggable containers. Take a look at this solution on stackoverflow regarding the same issue: Setting z-index on draggable elements

Especially the "click" function - in your case this should do the trick (untested):

$('.drag_resize').click(function() {
        $(this).addClass('top').removeClass('bottom');
        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);
    });

CSS:

.top {z-index: 2; position: relative}
.bottom {z-index: 1; position: relative}

You might modify your solution and use jquery draggable own event handlers (drag) instead of the "click" handler: http://jqueryui.com/draggable/#events

Cheers

-------------EDIT:-------------

Cleaner & easier solution: Setting z-index on draggable elements

Take a look at this working example: http://jsfiddle.net/RhF7t/

Community
  • 1
  • 1
simplyray
  • 1,200
  • 1
  • 16
  • 25
  • Hi Simplyray, Thanks for your help. Unfortunately it doesn't match for my requirement. Actually i m facing this issue while "resize" a div element. For instance, i have 3 div with resize functional. When i resize first div, second div (next resize funtional div) automatically moved to top. So i want restrict that change which means when i resize a div, next div should seems the same place and it will not affected. – user1948446 Jan 04 '13 at 12:36
  • Hi, if you resize your divs they interact with eachother: each resize affects the rendering. Take a look at http://stackoverflow.com/questions/6037464/how-to-prevent-resizable-and-draggable-elements-from-collapsing-on-each-other/6204793#6204793 for the solution. – simplyray Jan 04 '13 at 12:45