3

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.

Dinkheller
  • 4,631
  • 5
  • 39
  • 67
David
  • 4,266
  • 8
  • 34
  • 69

1 Answers1

1

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

Dinkheller
  • 4,631
  • 5
  • 39
  • 67