javascript - 如何在 extJs 或 javascript 中制作可交换组件

Question

如何在 exJs 或 javascript 中制作可交换组件。

我有两个组件，都可以拖动。

            xtype : "panel",
            title: 'My Apps',
            region: 'east',
            width: 290,
            items:[{
                xtype : 'panel',
                cls: 'myCLS',
                iconCls : 'app-info-appstore',
                title: 'Home',
                draggable : true,
                html : 'Home.',
                listeners: {
                    'render': function(panel) {
                        panel.body.on('click', function() {
                            alert('onclick');
                        });
                     }
                 }
                
            },{
                xtype : 'panel',
                cls: 'myCLS',
                title: 'Profile',
                iconCls : "app-info-iconToure",
                draggable : true,
                html : 'Apps',
            }

当我将一个拖到另一个时，它会重叠。我们如何在 extJS 中交换两个元素的位置。

任何其他图书馆帮助也将有效。

Answer 1

onDrop 你通过 insert 将它添加到父容器中.

要获得正确的位置，您可以根据鼠标位置计算它或...

onDrop 你得到你当前所在的目标 dom 元素。

const extComponent = Ext.ComponentManager.from(domEl),
      currentIndex = ... // search for the position of that item in parent

parent.insert(droppedItem, currentIndex);

进一步的工作

• 如果您使用占位符代理，您甚至可以预览这些内容。
• 如果组件大小相同，请使用 snap。

示例

Fiddle