PDA

View Full Version : Swapping and sorting of panels using DragDrop



qt4x11
25 Apr 2012, 2:15 PM
34526

The code below is based on the portal Ext example app - it creates a parent panel with 4 child panel items. These child panel items are draggable, and a DropTarget object has been assigned to the parent panel on render. The child panels are able to be dragged and moved around in the parent panel, but the code is generally not behaving the way I'd like it to.


For instance if you drag portlet-2 and drop it, it will be dropped at the bottom of the stack of panels. I want the portlets to be dropped at exactly the location where I drop it. For instance, if I drag portlet-4 over portlet-2, I want it to go where portlet-2 is, and I want the other panels to adjust their position to reflect insertion of portlet-4 in its new location within the parent panel.
I'm not sure how to do this. I saw 'DragDrop Manager'in the Api and it's swap() method, it seemed useful but not sure how to call it properly. Any suggestions on how to get my code to work the way I want it to would be greatly appreciated.


Thanks.


{
xtype: 'fieldset',
title: 'Studio Tab Ordering & Names',
defaultType: 'textfield',
padding: '0 0 0 0',
id: 'studioTabOrdering',
columnWidth: 0.5,
items: [{
xtype: 'label',
html: '<div align="left" style="margin-left:90px;">1. Drag the handles for the tabs to set their order. <br>2. Set a custom name for each tab. <br>3. Select to show or hide.</div><br><br>'
}, {
id: 'app-portal',
xtype: 'panel',
region: 'center',
cls: 'x-portal',
bodyCls: 'x-portal-body',
listeners: { render: {
fn: function(){
// Create the DropTarget object and assign it to the panel. Does not
// have to be assigned to the panel but needs to be assigned to something,
// or it will get garbage-collected too soon.
this.dropTarget = Ext.create('Ext.dd.DropTarget', this.el);



// Called once, when dragged item is dropped in the target area. Return false
// to indicate an invalid drop. DO NOT MODIFY the UI in
// this function. Use afterDragDrop and the data object.
this.dropTarget.notifyDrop = function(source, evt, data) {
if(typeof console != "undefined")
console.log("notifyDrop:" + source.id);


// The component that was dropped.
var droppedPanel = Ext.getCmp(source.id);
var appportal = Ext.getCmp('app-portal');


// make sure panel is visible prior to inserting so that the layout doesn't ignore it
droppedPanel.el.dom.style.display = '';

appportal.add(droppedPanel);


// We can't modify the component that was dropped in this
// function. However, we can add an event handler on the component
// that will be called shortly.
//
// In the handler we clone the component (not strictly necessary, we could
// do that here) and then remove our old component.
droppedPanel.dd.afterValidDrop = function() {
console.log("afterValidDrop:" + source.id);


};


return true;
};


// Called once, when dragged item enters drop area.
this.dropTarget.notifyEnter = function(source, evt, data) {
if(typeof console != "undefined")
console.log("notifyEnter:" + source.id);


return this.callParent(Array.prototype.slice.call(arguments));
};


// Called once, when dragged item leaves drop area.
this.dropTarget.notifyOut = function(source, evt, data) {
if(typeof console != "undefined")
console.log("notifyOut:" + source.id);


return this.callParent(Array.prototype.slice.call(arguments));
};

// Called for each mouse movement as dragged item is over the drop area.
this.dropTarget.notifyOver = function(source, evt, data) {
if(typeof console != "undefined")
console.log("notifyOver:" + source.id);


return this.callParent(Array.prototype.slice.call(arguments));
};


}
}
},
componentLayout: 'body',
items: [{
id: 'portlet-1',
title: 'Portlet 1',
layout: 'fit',
anchor: '100%',
frame: true,
draggable: true,
cls: 'x-portlet',
html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla.'
}, {
id: 'portlet-2',
title: 'Portlet 2',
layout: 'fit',
anchor: '100%',
frame: true,
draggable: true,
cls: 'x-portlet',
html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla.'
}, {
id: 'portlet-3',
title: 'Portlet 3',
layout: 'fit',
anchor: '100%',
frame: true,
draggable: true,
cls: 'x-portlet',
html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla.'
}, {
id: 'portlet-4',
title: 'Portlet 4',
layout: 'fit',
anchor: '100%',
frame: true,
draggable: true,
cls: 'x-portlet',
html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla.'
}],
}],
style: {
marginBottom: '22px'
}
}],