PDA

View Full Version : Draggable element is covered by other layer



su27
12 Jul 2010, 10:31 AM
I made a test page for drag & drop. i new two panels, one is main, the other is sub. new a draggable square, add it to main panel.
i can drag it in main panel, which is good.
i can drag it into sub panel as well. but this draggable square is covered by sub panel, i can't see it.
please help.

for some reason, i can't paste my code into here. it looks this textarea doesn't accept "paste" command.

TommyMaintz
13 Jul 2010, 1:48 PM
The textarea supports paste, its just a plain HTML textarea element. What OS/Browser are you on?

Anyway, without some more details or source code it is almost impossible for us to help you fix the issue you are having. The only thing I can think of is adding a cls to the draggable, and higher the z-index using css.

su27
13 Jul 2010, 5:41 PM
here is my test page. i tried different z-index, no luck.
BTW: i found that if I click code button in the tool bar, I can't paste nothing, browser is FF3. Safari is ok.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu Window</title>
<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">
<style>
.main_menu{
background-color: #5283D1;
z-index: 0;
width: 50%;
height: 100%;
position: absolute;
top: 0%;
left: 0%;
}
.sub_menu {
background-color: #430099;
z-index: 0;
width: 50%;
height: 100%;
position: absolute;
top: 0%;
left: 50%;
}
.drag {
background-color: #ffffff;
width: 100px;
height: 50px;
z-index: 1;
}
</style>
<script type="text/javascript" src="../../ext-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({
onReady: function() {
var drag = new Ext.Panel({
cls: 'drag',
html: 'drag it',
draggable : true
})
var main_menu = new Ext.Panel({
html: '<h2>Main</h2>',
cls : 'main_menu',
items :[drag],
layout:{
type : 'vbox',
align : 'top'
}
});
var sub_menu = new Ext.Panel({
html: '<h2>Sub</h2>',
cls: 'sub_menu'
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'hbox',
align: 'left'
},
items: [main_menu, sub_menu]
});

}
});</script>
</head>
<body>
</body>

</html>

TommyMaintz
14 Jul 2010, 12:53 PM
The reason is doesnt show on top of the other panel is because the panel body of the main menu has an overflow of hidden. Also the main_menu div needs a z-index. The following code gets the wanted behavior for me.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu Window</title>
<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">
<style>
.main_menu {
background-color: #5283D1;
z-index: 2;
}

.main_menu .x-panel-body {
overflow: visible;
}

.sub_menu {
background-color: #430099;
}

.drag {
background-color: #ffffff;
width: 100px;
height: 50px;
position: absolute;
}
</style>
<script type="text/javascript" src="../../ext-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({
onReady: function() {
var drag = new Ext.Panel({
cls: 'drag',
html: 'drag it',
draggable : true
});

var main_menu = new Ext.Panel({
html: '<h2>Main</h2>',
cls : 'main_menu',
items: [drag],
layout: {
type : 'vbox',
align : 'top'
},
flex: 1
});

var sub_menu = new Ext.Panel({
html: '<h2>Sub</h2>',
cls: 'sub_menu',
flex: 1
});

new Ext.Panel({
fullscreen: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [main_menu, sub_menu]
});

}
});</script>
</head>
<body>
</body>

</html>

su27
14 Jul 2010, 2:36 PM
that works perfectly. thanks a lot.