Hello,

I'm trying to swap panels inside a viewport (or parent panels) using drag and drop method.
From the basic example in the API code, I manage to drag the panel the drop it somewhere.

Here's the script:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>  
	<head>  
		<meta http-equiv="content-type" content="text/html; charset=windows-1250">  
		<meta name="generator" content="PSPad editor, www.pspad.com">  
		<title>PANELS D&D
		</title>  
		<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />   
		<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>  
		<script type="text/javascript" src="lib/ext/ext-all.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				EXTappViewport = new Ext.Viewport({
					id		: 'application-viewport',
					layout	: 'border',
					defaults: {
						border		: true,
						collapsible	: false,
						split		: false
		            },
					items	: [{
						region	: 'north',
						id		: 'top-bar',
						height	: 30,
						margins	: '4 4 4 4',
						html	: 'TOP BAR'
		            }, {
						region		: 'center',
						id			: 'app-center',
						layout		: 'border',
						margins		: '4 4 4 4',
						defaults	: {
							border		: false,
							collapsible	: false,
							split		: true,
							draggable	: {
								//      Config option of Ext.Panel.DD class.
								//      It's a floating Panel, so do not show a placeholder proxy in the original position.
								        insertProxy: false,
								
								//      Called for each mousemove event while dragging the DD object.
								        onDrag : function(e){
								//          Record the x,y position of the drag proxy so that we can
								//          position the Panel at end of drag.
								            var pel = this.proxy.getEl();
								            this.x = pel.getLeft(true);
								            this.y = pel.getTop(true);
								
								//          Keep the Shadow aligned if there is one.
								            var s = this.panel.getEl().shadow;
								            if (s) {
								                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
								            }
								        },
								
								//      Called on the mouseup event.
								        endDrag : function(e){
								            this.panel.setPosition(this.x, this.y);
								        }
							}
						},
						items		: [{
							title	: 'WEST',
							region	: 'center',
							html	: 'WEST SIDE'
		                }, {
		                	title	: 'EAST',
							region	: 'east',
							width	: 600,
							html	: 'EAST SIDE'
		                }]
					}, {
						region		: 'south',
						id			: 'bottom-bar',
						height		: 30,
						margins		: '4 4 4 4',
						html		: 'BOTTOM BAR'
					}]
				});
			}
		</script>   
	</head>  
	<body> 
	</body>
</html>
When I drag WEST panel, and I dropped it on the EAST panel holder, I want both panels swap places.

And it would be nice as well if I can get a 'snap to container' feeling along the dragging process.

Any clue how to do this, links, or even snippets will be greatly appreciated.
Thanks in advance.

Cheers...