Question

I have a div with the follow css:

.azul{
   height:100%;
   width:100px;
   position:absolute;
   left:0px;
   top:0px;
   background-color:blue;
}

The 100% height is the same height of the container.

I bind the “dragstart” to a function. that function resize the div to a smaller height.

If i define:

jQuery(element).draggable({ containment: ".container" });

The div is resized well, but cant move it Y position, only X, so…the left css attribute change, but the top no…

I deduce that when the drag start, jquery-ui take the initial height of the div ( the 100%), and when i change it in the function…the jquery-ui dont allow me to move Y position becuase the 100% is stored somewhere…

I tried to dont put 100% and make dinamical with px value…

Thanks is advice !!!

Answer 1

Looks like you need to resize before dragStart.

jQuery(".panel").bind("mousedown", onDragStart);