PDA

View Full Version : Container scroll put draggable item behind mask



swarnendude
5 Jul 2011, 7:40 AM
I was working on a Drag-drop operation similar to Solitaire application. I am adding a mask to the whole body while drag starts and remove mask while the dragged element dropped.

There are multiple elements. I made the z-index of draggable item 9000 (mask z-index = 8000) while dragging (.x-dragging class) so that only the dragging element will be viewed above mask, all other items will be behind mask.

Now, once I scroll the items in container, after any dragging does not put the item above mask. I checked the z-indexes are proper, but nohow the item is coming above mask. Following are my dragstart and dragend events I placed in Draggable instance.



dragstart : function(draggable){
Ext.getBody().mask();
// product-dragging-item class has some other styles along with z-index : 9000
draggable.getProxyEl().toggleCls('product-dragging-item');
},

dragend : function(draggable){
draggable.getProxyEl().toggleCls('product-dragging-item');

Ext.getBody().unmask();
}


Sencha Version : 1.1

Tested in : iPad, Chrome