PDA

View Full Version : Make DragProxy more Operating System like (with example)



crp_spaeth
25 Oct 2009, 4:01 AM
Hi there, I just started to learn more about DD in Extjs.

And I was wondering If there is a big deal to Override the DragSource autoOffset function.

What is this about?

The default behavior of a Systems Drag operation in Windows or Osx is that the dragedobject is "picked-up" by the cursor and the proxy placed directly under the curserposition as it has been picked up. This is the default behave of the DD class as well.
Things get changed when you use a subclass of the DragSource since it overrides the autoOffset Function of DD so the Dragged Object(s) is placed 12 pixels left and 20 pixels below the cursor Position.

Does this happens for a special functional reason (like Mouseevents) or can I override the autoOffset function like that without destroying the whole DnD thing:


Ext.override(Ext.dd.DragSource, {
autoOffset : function(x, y){
if(this.proxy)
this.proxy.setDropIconOffset(x, y);
Ext.dd.DragSource.superclass.autoOffset.apply(this, arguments);
}
})

To complete this I would override Ext.dd.StatusProxy in the following Way:


Ext.dd.StatusProxy = Ext.extend(Ext.dd.StatusProxy, {
constructor : function(config){
Ext.apply(this, config);
this.id = this.id || Ext.id();
this.el = new Ext.Layer({
dh: {
id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
{tag: "div", cls: "x-dd-drop-icon"},
{tag: "div", cls: "x-dd-drag-ghost"}
]
},
shadow: !config || config.shadow !== false
});
this.dropIcon = Ext.get(this.el.dom.childNodes[0]);
this.ghost = Ext.get(this.el.dom.childNodes[1]);
this.dropStatus = this.dropNotAllowed;
},

setDropIconOffset : function(x, y){
this.dropIcon.setStyle('position', 'absolute');
console.log(x, y);
this.dropIcon.setStyle('left', x+5);
this.dropIcon.setStyle('top', y-5);
}
})

What do you think about that?

crp_spaeth
25 Oct 2009, 5:23 AM
I found two gaps with that.

First of all.

We dont really know the mouse offset of the draged node yet. I think this can be fixed by an Template methode wicht should get overridden by subclasses of dragzone wich contains a selectorclass.

The bigger Problem occurse, when we about to drop

Since the proxy sits right under the cursor all the time, it will reseive all the mouseevents...

But I think this can be worked around by Animals forwardMouseEvents Override of Ext.Element....

crp_spaeth
26 Oct 2009, 11:04 PM
No thoughts about that?

Comon I count on you Animal :)