View Full Version : Dragging Sprites with DDProxy?

6 Jan 2012, 3:48 AM
Hello there,

I'm stuck again... I want to drag a sprite in a draw component on another sprite and trigger a handler function to do some stuff (popup a window etc.). Despite of dragging the real sprite (like in the default drag implementation of sprites in SpriteDD) I want to use a proxy of it and drag the proxy to the other sprite which is a drop target... unfortunately the SpriteDD Class is kind of unhandy to modify... When starting a drag on a sprite the frame of the proxy is shown (at the right place of the sprite) but it doesn't move around... (first i disabled the transformation of the sprite in my own onDrag function). It seems that the el of the proxy-layer doesn't sync with the mouse events.

Has anyone an idea? Is there anyone having some more experiences with dragging sprites? Or do I have to implement my own svg-proxy DD Class e.g. by creating a svg rectangle instead of the created div?

6 Jan 2012, 5:31 AM
okay - my fault. The xy coordinates of the proxie's el are of course the real browser-window xy coordinates. The onDraw Function of the SpriteDD transforms it to the svg coordinates. So I now make something like that:

Ext.define('MyApp.draw.SpriteDD', {
extend: 'Ext.draw.SpriteDD',

constructor: function(config)
MyApp.draw.SpriteDD.borrow(Ext.dd.DDProxy, ['createFrame','showFrame']); //borrowing original functions of DDProxy because in SpriteDD those are overridden with empty functions.

startDrag: function(x, y)
var me = this;
me.prev = me.sprite.surface.transformToViewBox(x, y);
this.dragging = true;
this.onInitDrag(x, y);

onDrag: function(e)
var xy = e.getXY(),
me = this,
sprite = me.sprite,
attr = sprite.attr, dx, dy;
xy = me.sprite.surface.transformToViewBox(xy[0], xy[1]);
dx = xy[0] - me.prev[0];
dy = xy[1] - me.prev[1];
//doing some stuff with the transformed xy later... before here was the setAttribute call for the sprite-movement
me.prev = xy;
this.setDragElPos(e.getXY()[0], e.getXY()[1]);

setDragElPos: function(iPageX, iPageY)
this.proxy.proxy.el.setXY([iPageX, iPageY]); //moving the proxy instead of the sprite

if it would be of any interest I would post the whole spriteDDProxy Code when I'm ready...

10 Jan 2012, 11:13 PM
Some more issues... and i have no idea.

1. The drag drop operation with the proxy starts only on the second time dragging a sprite: You select a sprite and drag it around, the sprite (i.e. the proxy) doesn't move. You select the same sprite a second time, the frame of the proxy appears and you can drag that proxy-frame around. I haven't seen the difference between those two operations... maybe it has something to do with event handling or with calculating different coordinates (sprite in svg, div with dom-coordinates of the proxy-frame).

2. If I declare other sprites as DDTargets (using the same ddgroups) the drop operation doesn't work in browsers other then chrome (or webkit i suggest) i.e. on firefox after dragging (hovering) over a valid ddTarget Sprite I don't see any green icon that i'm able to drop the dragged sprite. In chrome the green icon appears and after dropping the dragdrop function starts successfully... haven't had the time yet to do cross browser debugging to see the differences - maybe this really has something to do with different xy coordinates or the implementation of getRegion (I've seen some NaN in x2 or y2 coordinates in firefox).

Anyone an idea? ;) Is there a chance that this implementation change in 4.1?