PDA

View Full Version : Carousel & z-index



geekus
27 Nov 2010, 7:12 AM
Hello! I'm trying to set up an interface with multiple drag and drops, and I'm having some issues with child elements of carousel. I need the element being dragged to always be above everything else.

So I've added



.x-dragging {
z-index: 9999;
}

to my css. This works for most elements, but not for child elements of Carousel! Any ideas of how to fix this?

Available at http://eple.mine.nu/dd-z-issue/

Complete CSS & JS below:


<script>

Ext.setup({
onReady: function(){

var AppH1 = {
style: 'background: #302; color: white',
title: 'app_h1',
html: 'MyAppTitle'
};

var AppTabBar = new Ext.TabBar ({
dock: 'bottom',
ui: 'dark',
sortable: true,
items: [
{
text: 'Tab1'
},
{
text: 'Tab2'
}
]
});

var PanelX = {
layout: 'vbox',
items: [{
html: '<div class="draggable" id="draggable2">Draggable2 – Above! Yes!</div>'
}]
}

var PanelY = new Ext.Panel({
layout: 'vbox',
items: [{
html: '<div class="draggable" id="draggable3" style="z-index: 10000; height: 150px; background: violet">Draggable3..</div>'
}]
});

var Carousel = new Ext.Carousel({
direction: 'horizontal',
ui: 'dark',
activeItem: 0,
height: 100,
defaults: {
cls: 'card'
},
items: [
PanelY,
{
html: 'It\'s a carousel! Some z-index issues though?'
},
]
});

CurrentFunction = new Ext.Panel ({
height: 200,
items: [PanelX]
});

/* */

var TouchGo = new Ext.Panel({

fullscreen: true,
layout: {
type: 'vbox',
align: 'strech',
pack: 'start'
},
dockedItems: [AppTabBar],
items: [AppH1,Carousel,CurrentFunction]

});

new Ext.util.Draggable('draggable2', {
revert: true,
animationDuration: 0
});

new Ext.util.Draggable('draggable3', {
revert: true,
animationDuration: 0
});
}

});

</script>

<style>

.x-panel, .x-panel-body, .x-carousel, .x-carousel-body {
overflow: visible;
}

.draggable {
background-color: #ffffff;
width: 100px;
height: 90px;
position: relative;
z-index: 50;
}

.x-dragging {
opacity: 1;
border: 5px solid green;
z-index: 9999;
}

</style>

rajivpa
26 Jan 2011, 8:59 AM
Did u get any solution ?
I trying to drag a panel out of a Carousel, but instead of being able to move out, the panel goes underneath the carousel boundaries.

geekus
26 Jan 2011, 9:07 AM
Okay, but you should also make sure that overflow of the container is not set to hidden in the CSS.

My problem, however, it appears to be some kind of webkit bug. What you'll need to add to your code is:



var listeners = {
dragstart: function(draggable){
var style = draggable.el.up('.x-carousel-item').dom.style;
trans = style.webkitTransform;
style.webkitTransform = 'none';
},

dragend: function(draggable){
draggable.el.up('.x-carousel-item').dom.style.webkitTransform = trans;
}
}, trans;


and then add a reference to the listener here:



new Ext.util.Draggable('draggable1', {
revert: true,
animationDuration: 0,
listeners: listeners
});