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

20 Feb 2012, 1:02 PM

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.


20 Feb 2012, 1:30 PM

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

20 Feb 2012, 2:39 PM

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

but without luck.


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

alignElWithMouse: function(el, iPageX, iPageY) {
if (!this.deltaSetXY) {
vpSize = this.cachedViewportSize = { width: EL.getDocumentWidth(), height: EL.getDocumentHeight() };
vpSize = this.cachedViewportSize = { width: 25000, height: EL.getDocumentHeight() };