CODEWITHSUNDEEP
javascripthtmlextjsextjs6
David
David

Reputation: 4291

How to make swapable component in exJs or in javascript

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.

Upvotes: 3

Views: 111

Answers (1)

Dinkheller
Dinkheller

Reputation: 5074

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

  • If you use a placeholder proxy you can even preview these.
  • Use snap if your components are the same size.

Example

Fiddle

Upvotes: 1

Related Questions