PDA

View Full Version : Portal drag drop, fixed position of a block



cloudweb
18 Nov 2009, 2:24 AM
I'm looking for a way so that a block is fixed on his position, if i set draggable to false in the portal example, i'm not able to draw the block to somewhere else but i can drop other blocks above it.

anyone have an idea?

Condor
18 Nov 2009, 4:23 AM
You also have to modify Ext.ux.Portal.DropZone.notifyOver to not allow dropping above a non-floating portlet.

cloudweb
18 Nov 2009, 5:21 AM
if i have this in my portal with an item, te given id of the event onDragOver is the main div, and not an other item in the portal example.


var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings'
}]
},{
xtype:'portal',
region:'center',
margins:'35 5 5 0',
items:[{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Grid in a Portlet',
layout:'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
},{
title: 'Another Panel 1',
tools: tools,
draggable: false,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px',
items:[{
title: 'Panel 3',

html: Ext.example.shortBogusMarkup,
draggable:
{
onDragOver: function(e, id){
alert(id);
var dragEl = Ext.get(this.getDragEl());
var overDiv = Ext.get(id);
var overDivClass = overDiv.dom.className;

var mpx = e.xy[0]; //xpos of mouse
var mpy = e.xy[1]; //ypos of mouse
var mpLX = mpx-25; //left boundry
var mpRX = mpx+25; //right boundry

var mpTY = mpy-25; //top boundry
var mpBY = mpy+25; //bottom boundry

//console.log(overDivClass);
//alert(overDivClass);
//alert(overDivClass);
if(overDivClass == 'x-panel-bwrap')
{
if(mpLX < overDiv.dom.getClientRects()[0].left ||
mpRX > overDiv.dom.getClientRects()[0].right ||
mpTY < overDiv.dom.getClientRects()[0].top ||
mpBY > overDiv.dom.getClientRects()[0].bottom)
{
dragEl.applyStyles({border:'1px solid red'});
}
else
{
dragEl.applyStyles({border:'1px solid green'});
}
}
}
}

},{
title: 'Another Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
}]
,listeners: {
'DragMove': function(e){
Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' +
e.columnIndex + '<br />Position: ' + e.position);
}
}
}]
});