View Full Version : Losing drag proxy in embed...mouse speed related.

28 Sep 2010, 8:20 AM
Howdy. Thanks in advance for your help.

I am using DDProxy to drag an icon around. When I am dragging the icon over the toolbar, it works fine, but when I drag it over an embedded graph <embed src= et. /> I 'lose' the icon and it hangs (the icon, not the browser). Interestingly, this is related to the direction of the drag and the positioning of the mouse over the proxy el. I.e. if I setDelta(middle, middle) in my startDrag override, it becomes far less sensitive to losing the icon. When I setDelta() to the corner of the proxy it becomes extremely sensitive (and that is unfortunately what I need).

I suspect the onMouseMove code within my embed is interfering with the dragging code...and that it is a timing issue. Unfortunately my intention is to make the onMouseMove code more complicated, not less (I'm adding some fairly complex functionality to an already complex page).

Any thoughts on how I can workaround this problem would be appreciated.
The embed does live within an ext panel, if that helps at all...

29 Sep 2010, 10:54 AM
So I think I know 'how' to fix this, but I'm not sure how to implement it.
The embed seems to play havok with mousemove type events. I tried to move all the onmousemove code to the container that encapsulates the embed (container_var.getEl.addListener('mousemove', function), and it performed terribly (the event would fire intermittently only when crossing container boundaries).
My thinking here is I should turn this around and override the DDProxy mousemove event handler so that the embed code is calling it when I'm in the embed.
My question....how do I do this? How do I manually capture and forward the mousemove events to DDProxy when in the embed, but let Ext do it when not in the embed?

29 Sep 2010, 1:22 PM
I'm calling a delegate of ext.dd.DragDropMgr.handleMouseMove(evt).
However, it expects an Ext wrapped event, not a browser event.
Is there a way I can easily wrap this...a browser event->ext event converter???

29 Sep 2010, 1:51 PM
It appears Ext.EventObject.setEvent(browserevent) will do this.
Now a related problem crops up...the value for clientY in the onmousemove event for the embed is relative to the embed, not the document. I cannot set a getter...so I'm not sure what the best way to deal with this is...make a writable copy of the event? Is their an easier way?

29 Sep 2010, 2:01 PM
If I do make a copy (new Object(browserevent)) I get the strange error...too much recursion. I guess the object is way too deep.
Any thoughts on how to correct for the misplacement of the y axis in the embed's onmousemove?
I feel like I'm really close here. The dragged icon does not get lost over the embed anymore (it doesn't hang), rather it is just offset by the size of the toolbar (or double it)..........


29 Sep 2010, 2:30 PM
I'm looking for a place to override the code that 'pulls' the proxy element back under the mouse so that I can add an offset to the event that I can look for in that code.
Where does this code live? I'm searching and having some trouble finding it...

29 Sep 2010, 11:09 PM
I think you're barking up the wrong tree.

You will have to mask the plugin object with a regular position:absolute div.

Place it on drag start, remove it on drag end.

30 Sep 2010, 7:22 AM
Wrong tree indeed.
Thank you animal, this worked beautifully.
I included a div in the pages base html with 'display:none and z-index:+' and set its box and display: block in startDrag, and back again in endDrag.
I used document.getElementById() to change its settings...which works great.
Is there a more 'ext' way of doing this, and is there any reason to use it instead of this approach?

30 Sep 2010, 7:27 AM
This is "the" way to do it.

And you are using Ext to do it (Aren't you?), so it's an Ext way.

30 Sep 2010, 7:41 AM
I just meant my implementation of your mask idea. It wasn't obvious to me how to use Ext's DOM wrappers to insert the div, pull it out, manipulate it. Nor was it obvious if there was any real benefit to that vs. GetElementById(), setAttribute() and having the <div> in the page body ready to go.

30 Sep 2010, 7:51 AM
One additional question.
I am also going to need to drag from the embed to the main page. I can use code within the embed to call a hook to initiate a drag, but to do so I need to know how to artificially initiate a drag (without a linked element...I want to call a function programmatically and attach my own proxy to be dragged within that function).
The embed knows where and when a drag is valid (and what data that drag represents), the page cannot know this.

30 Sep 2010, 11:16 AM
I don't think it's possible. They are probably using a completely separate object model. But then I don't know what you are using.

30 Sep 2010, 11:40 AM
1. I control the code in the embed. It is a customized svg doc.
2. the object model is completely different.
3. I can write code within the embed to make javascript calls into the main page. Within the embeds context, I know when to start a drag.
4. Ext can control the drag complely once I start it. I will provide the Proxy for it to drag that will live in the context of the main page.

Thus, the key to all of this is that I need to be able to programmatically enter the 'dragging' state. I need to skip the drag detection state and do this without a real drag source (or with a 'pretend' source).

I've been considering having the embed call the page to place a small 'mask' under the mouse when I'm over one of the embeds valid drag targets. The mask would have to forward it's mouse calls to the underlying embed, so that it could be removed when I am no longer over a valid drag item.

That's my backup anyways if I can't figure out a way to artifically enter the 'dragging' state through a function call from the embed into the main page.

any thoughts, recomendations?

or am I up the wrong tree again :P

30 Sep 2010, 12:39 PM
If the object is scriptable, then you can create a DragZone out of it.

1 Oct 2010, 8:33 AM
There is a bit of a chicken and egg problem here.
I can add a dragzone, but how is it going to get the mouse interactions over the embed in the context of the whole page? Thats why we has to use the mask after all...
I think I am back to two choices...
1. figure out how to artifically initiate a drag for the dragzone from inside the context of the embed.
2. leave the mask over the embed all the time. Forward mouse events into the embed as appropriate, adjusting for the x-y position of the events either withing the embeds code or by modifying the event.

Other ideas? Do these seem possible/advisable?

4 Oct 2010, 1:53 PM
Approach #2 seems to mostly work, except the behavior when I am not returning data (getDragData returning undefined) isn't quite right. Instead of not entering the drag state at all, it enters a state where the Ext drag code starts capturing the mouse events. I need a failed drag to be completely failed so that it does other behavior in the embed when it is not on a valid drag spot.
I'm currently trying to figure out the best/simplest way to correct this behavior...thoughts are appreciated.

5 Oct 2010, 11:47 AM
This is driving me crazy.
stopPropagation = false doesn't even work.
I've been spending enless amounts of time in firebug setting breakpoints, trying to figure out where this behavior is happening. Everything in DragZone, DragDropMgr, DragSource seems to say that a drag isn't happening. However, When I drag an invalid target within the dragzone the cursor changes to the do-not-enter symbol and events stop being propagated into the masking div (and thus the embed). When I unclick the embed sees events again. So, the embed gets the initial mousedown, then gets mousemoves after the mouseup.
The embed has dragging type behavior, and I want that to happen only on invalid drag targets.

If anybody has any idea where these events are getting blocked, or how to trace it out (where is that cursor being set?) please help...

5 Oct 2010, 11:48 AM
p.s. draggin on valid drag targets is working AOK.

5 Oct 2010, 11:56 AM
it does not look like the ext drag not allowed symbol, rather it looks like the standard cursor:not-allowed css setting...

5 Oct 2010, 12:10 PM
I'm starting to think this might be a strange browser issue...
I try this in chrome and it works...the only caveat is I get the alpha entry cursor...but the functionality is exactly what it should be!

#$T^@$%!%[email protected]