PDA

View Full Version : Drag&Drop Zones inside Panel with scroll



ljadrbln
20 Feb 2012, 1:02 PM
Hello,

I have an application with a Viewport as a base component.

My "center" element is:


Ext.apply(this, {region: 'center',
autoScroll: true,
items: [
{id: 'test', xtype: 'panel', width: 25000, height: 350}
]
});


I'm trying to create the Drag and Drop zones, when this panel rendered:


initDragZone: function(cmp){
new Ext.dd.DDTarget(cmp, 'objectsDDGroup');
},

initDropZone: function(cmp){
var me = this;
cmp.dropZone = Ext.create('Ext.dd.DropZone', cmp.getEl(), {
/**
* If the mouse is over a target node, return that node. This is
* provided as the "target" parameter in all "onNodeXXXX" node event handling functions
*/
getTargetFromEvent: function(e) {
return e.getTarget();
},
onNodeDrop: function(target, dd, e, data){
//Create new node in the DOM
var html = '<div style="width: 100px;height: 100px;border: 1px solid red;"></div>',
node = Ext.DomHelper.append(target, html),
dd = new Ext.dd.DD(node, 'objectsDDGroup', {isTarget: false});

return true;
}
.............
});
}


Node successfully added, and everything works fine: I can drop element to the DropZone, then I can drag them inside the panel (actually only inside the screen size).

The panel has scroll, because it has width = 25000. And I want to drag elements over the scrolling.
But dragging stops when I tried to cross the line of my window size.

Thanks.

sskow200
20 Feb 2012, 1:30 PM
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.dd.DragZone-cfg-containerScroll


Looks to be what you're looking for....

ljadrbln
20 Feb 2012, 2:39 PM
sskow220,

Thanks for the url, probably you are right.

But I want to drag elements without additional proxy element. Something like here: http://www.sencha.com/blog/5-steps-to-understanding-drag-and-drop-with-ext-js/.
But target container can has the scroll.

I tried to add:


initDragZone: function(cmp){
cmp.el.ddScrollConfig = {
vthresh: 50,
hthresh: 250,
frequency: 100,
increment: 200
};
Ext.dd.ScrollManager.register(cmp.el);
},


but without luck.

Thanks.

ljadrbln
22 Feb 2012, 6:24 AM
After debugging I have made next hack which works for me:



Ext.dd.DD.override({
alignElWithMouse: function(el, iPageX, iPageY) {
.......................
if (!this.deltaSetXY) {
vpSize = this.cachedViewportSize = { width: EL.getDocumentWidth(), height: EL.getDocumentHeight() };
//Hack
if(Ext.get(el).hasCls('dragObject')){
vpSize = this.cachedViewportSize = { width: 25000, height: EL.getDocumentHeight() };
}
.....................
}
.......................
}
});