Swapping panels within viewport using drag and drop
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...
