PDA

View Full Version : Draggable inside a container + Zindex



corneadoug
18 Nov 2012, 10:50 PM
Hi,

I have some elements inside a container with draggable: true, and I want to change their z-index in order to have the one in movement always at the top of the others.

The problem, is that the elements don't have a zIndexManager. I tried to add floating: true to the elements, but by doing that they are going out of my container + bringToFront() is making them go on top of every other layout.

I would like my elements to always remain inside the container, but being able to change their order inside the container when selected for movement

mitchellsimoens
20 Nov 2012, 11:07 AM
Keep track of them and change the z index when it gets focus (FocusManager can help with focus)

corneadoug
20 Nov 2012, 9:32 PM
I did it,

I am keeping a maxZorder value in the main container. (set by default to -1)
maxZorder: -1,

and I increment this value just before adding a new draggable container

this.dashboardContainer.maxZorder +=1;


I set z-index to 0 for all of my draggable containers when it's created. (I get the draggable containers infos by the DB ordered by z-index but I'm not loading their z-index value, always starting from 0)

widget.style = "z-index: 0;";

Then on the draggable container move handler, I am doing:

if (this.getEl().getStyle("z-index") < this.dash.maxZorder)
{
this.dash.maxZorder += 1
this.getEl().setStyle("z-index", this.dash.maxZorder);
}

And when I want to save the draggable containers infos back in the DB

var items = this.dashboardContainer.items.items;
items.sort(function(a,b) {return parseInt(a.el.dom.style.zIndex) - parseInt(b.el.dom.style.zIndex);});
// sort the draggable containers by z-index

for(var i=0; i < items.length; i++){
itemconfig = items[i].getConfig();
itemconfig.param.zorder = i;

// set new z-index value for DB save (even if not necessary since I'm not loading their z-index value when created)

widgets.push(itemconfig);
}