Sencha Touch 2.4.2 - Draggable Component not moving outside Container

Question

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 current screen. I want to move the componets (10, 20, 30) to left side

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

Answer 1

Check out my drag & drop plugin and example. I improved draggable class to support not only components but also elements. That way i could manage to do what you couldnt.

If it doesnt help you, reproduce the same problem in sencha fiddle, so that i can help you.