Carousel & z-index

[geekus]

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]

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]

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
});