How to make swapable component in exJs or in javascript.
I have two components and both are dragabble.
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',
}
When I drag one to another it is overlapping. How can we swap the positon of both element in extJS.
Any other library help will also work.
onDrop you add it to a the parent container via insert.
To get the correct position you can either calculate it based on the mouse position or ...
onDrop you get the target dom element you are currently at.
const extComponent = Ext.ComponentManager.from(domEl),
currentIndex = ... // search for the position of that item in parent
parent.insert(droppedItem, currentIndex);
Further work
Example