Sencha Touch 2.4.2 - Draggable Component not moving outside Container

[JesusJoseph]

I am having a Container. Inside that container I am having 3 companent with draggable: true as below image

I can drag the 3 components within the parent container (move up and down) But I need to move the 3 component outside the container to left and right side (marked in arrow).

Screenshot of my screen.
Capture.jpg
Can someone please help me on this.
This is the code that I am using

{
xtype: 'container', //Middle Container
width: '100%',
height: '80%',
style: 'background-color: #669900',
layout: 'hbox',
items: [{
    xtype: 'component',
    itemId: 'markCompxx10',
    draggable: true,
    width: '100%',
    height: '30%',
    style: 'background-color: #00EE00', 
    html: '10',
    listeners : { element : 'element', drag : function(e, t) { this.fireEvent('drag', this, e, t); }}
}, {
    xtype: 'component',
    itemId: 'markCompxx20',
    draggable: true,
    width: '100%',
    height: '30%',
    style: 'background-color: #00EE00', 
    html: '20',
    listeners : { element : 'element', drag : function(e, t) { this.fireEvent('drag', this, e, t); }}
}, {
    xtype: 'component',
    itemId: 'markCompxx30',
    width: '100%',
    height: '30%',
    style: 'background-color: #00FFEE', 
    html: '30',
    listeners : { element : 'element', drag : function(e, t) { this.fireEvent('drag', this, e, t); }}
}]
}
}

thanks

[JesusJoseph]

Any one have answer for this question
I tried for the whole week but still I couldn't find a way to drag a component outside parent component.

Thanks,

[Pavan Kumar]

Hi, Even I stuck with the same issue. Did u find any solution for this...???

[JesusJoseph]

Check this drag & drop plugin and example.

this is working for me.

Hope this is helpful.

thanks
Joseph.