如何在 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 中交换两个元素的位置。
任何其他图书馆帮助也将有效。
最佳答案
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。
示例
关于javascript - 如何在 extJs 或 javascript 中制作可交换组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70001812/