PDA

View Full Version : trying to "pop" a draggable object out of its container



jep
5 Jan 2011, 1:56 PM
I have an app with a floating container containing multiple items. I want to be able to drag one of these items out of the container and then hide the container. I just can't figure out the magic sequence to do it. Here's a simplified version. I'm using 1.0.1a and Safari 5.0.3 XP.



<html>
<head>
<title>test</title>
<link rel="stylesheet" href="sencha/resources/css/sencha-touch-debug.css" type="text/css">
<script type="text/javascript" src="sencha/sencha-touch-debug.js"></script>

<script type="text/javascript">

Ext.setup({
onReady: function() {
float = new Ext.Component({
id:'float',
width:200,
height:200,
style:'background-color: #C0C0FF',
html:'float',
draggable:{
listeners:{
offsetchange:floatMoved2
}
}
});

ctr = new Ext.Container({
id:'ctr',
layout:'fit',
width:400,
height:400,
x:10,
y:10,
floating:true,
hideOnMaskTap:false,
style:'background-color: #C0FFC0',
items:[float]
});

mainPanel = new Ext.Panel({
id:'mainPanel',
layout:'fit',
fullscreen:true,
dockedItems:{xtype:'toolbar', dock:'bottom', items:[
{xtype:'button', text:'float', handler:function() { makefloat() } }
]}
});

makefloat = function() {
ctr.remove(float);
ctr.hide();
float.hide();
ctr.doLayout();
float.setFloating(true);
float.hideOnMaskTap = false;
float.show();
}

function floatMoved1(sender, offset) {
console.log('floatmoved1');
}

function floatMoved2(sender, offset) {
console.log('floatmoved2 main');
if (ctr.isVisible()) {
console.log('floatmoved2 inner');
makefloat();
}
}

ctr.show();
}
});

</script>
</head>

<body></body>
</html>


The problem seems to be that float gets stuck in the x-dragging mode. If I inspect float.el.dom after dragging it a bit until it stops being draggable, this is what it shows:



<div id=​"float" class=​"x-component x-draggable x-dragging x-floating" style=​"background-color:​ rgb(192, 192, 255)​;​ width:​ 400px;​ height:​ 400px;​ left:​ 0px;​ top:​ 0px;​ -webkit-transform:​ translate3d(24px, 30px, 0px)​;​ ">​float​</div>​


Is there some way of doing a good handoff or re-setting the draggable state? I've tried using setDraggable all manner of ways, but it appears to stop paying attention to it after it's already int he dragging state.

Right now I plan on working around this by hiding all the OTHER items in the container and making its height=0 when the dragging is happening. But that just doesn't feel very clean.