PDA

View Full Version : problem with draggable item in carousel



su27
14 Jul 2010, 9:26 PM
i have a problem with draggable item in carousel.
my test page structure is one carousel has 2 pages, A and B, each page has one draggable items(AD and BD).
i can drag AD item in page A, it's working fine.
but when i flip to page B, start dragging BD, it flies to page A.
please help. here is code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">
<style>
.c1{
background-color: #005555;
width: 25%;
height: 25%;
position: relative;
top: 0%;
left: 0%;
}
.c2{
background-color: #550055;
width: 25%;
height: 25%;
position: relative;
top: 0%;
left: 50%;
}
</style>
<script type="text/javascript" src="../../ext-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({
onReady: function() {
var carousel = new Ext.Carousel({
defaults: {
xtype: 'panel'
},
items: [
{
items :[
{
xtype : 'panel',
draggable : true,
html : '<p>11</p>',
cls : 'c1'
}
]
},
{
defaults:{
},
items :[
{
xtype : 'panel',
draggable : true,
html : '<p>23</p>',
cls : 'c2'
}
]
}]
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'fit'
},
items: [carousel]
});
}
});
</script>
</head>
<body>
</body>
</html>

TommyMaintz
15 Jul 2010, 11:32 AM
I am not sure why, but it seems that this is because you are using a percentage based left value on the second draggable. If I change your code to the following it works.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">
<style>
.c1{
background-color: #005555;
width: 25%;
height: 25%;
top: 0;
left: 0;
position: relative;
}
.c2 {
background-color: #550055;
width: 25%;
height: 25%;
top: 0;
left: 100px;
position: relative;
}
</style>
<script type="text/javascript" src="../../ext-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({
onReady: function() {
var carousel = new Ext.Carousel({
items: [{
items: [{
xtype: 'panel',
draggable: true,
html: '<p>11</p>',
cls: 'c1'
}]
}, {
items: [{
xtype: 'panel',
draggable: true,
html: '<p>23</p>',
cls: 'c2'
}]
}]
});

new Ext.Panel({
fullscreen: true,
layout: {
type: 'fit'
},
items: [carousel]
});
}
});
</script>
</head>
<body>
</body>
</html>

su27
15 Jul 2010, 1:22 PM
no luck, it doesn't work under my env. win7+safari5
i think this could be a bug. BD look belong to page B, but when it is being dragged, it's stage is page A.