Sencha Touch 2.4.2 - 可拖动组件不在容器外移动

Question

我有一个容器。在该容器内，我有 3 个可拖动的组件：如下图所示

我可以在父容器中拖动 3 个组件（上下移动）但是我需要将容器外的 3 个组件移动到左侧和右侧（用箭头标记）。

Screenshot of my current screen. I want to move the componets (10, 20, 30) to left side

有人可以帮我解决这个问题吗？

这是我正在使用的代码

{
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); }}
}]
}

}

谢谢

Answer 1

查看我的拖放插件和 example。我改进了 draggable class 以支持组件和元素。这样我就可以做到你做不到的事情。

如果对您没有帮助，请在sencha fiddle中重现相同的问题，以便我可以帮助您。

Sencha Touch 2.4.2 - 可拖动组件不在容器外移动

Sencha Touch 2.4.2 - Draggable Component not moving outside Container

components

draggable

sencha-touch-2