How to fire YUI3 mouseenter/leave events while using YUI3 Dragdrop?

445 views Asked by At

I have several list items with their parent ul delegated as the node for Dragdrop, this works fine by itself - it drags, it drops.

In the Droptarget, I have a DOM's worth of nodes which subscribe to mouseenter/leave events (I've yet to delegate that behaviour to a container, if its possible/effective). This also works fine, mousenter/leave events fire when I enter and leave each element.

The problem though, is when I am in the middle of a drag operation, and I drag over the Droptarget - which is the correct place for me to be aiming at. What I want is the mousenter/leave targets to continue to fire (because the element hovered over adds a border and background - so you can see what you're hovered over).

The result is the ability to drag a node over the Droptargets' nodes and have those nodes 'highlight' (with border as above) via mousenter/leave, and then I can drop.

So again, both work fine separately, but in unison the mousenter/leave events don't fire while I'm dragging. Does this have something to do with bubbling?

The above code is spread across a few intricate files at the mo', right in the middle of an application, but if the above is not understandable - let me know and I will paste some code.

thanks, d


MAJOR EDIT:

Ooook. I was waaay off the mark. I do in fact have this working correctly - almost exactly the way I want. The problem is... the nodes being hovered while dragging are somehow positioned from top-left of the parent document. In a nutshell, I'm dealing with a dom's worth of Nodes in an iframe, they're now all set as Drop targets for the Drag objects in the parent DOM. When dragging over the iframe, the iframe Drop targets seem to be positioned very strangely.

Here's an example page now, too: http://codefinger.co.nz/projects/fpx/mod/project/dd_test_1.html

It fairly clearly outlines what is going on - there's two sets of nodes to drop the drags onto - one set (left) in an iframe, the other set (right) in a div in the parent DOM. The stuff in the parent DOM works fine, naturally, the stuff in the iframe exhibits the bizarre positioning. To see the positioning weirdness - drag one of the 'widget' list items over ... the list of widget list items :P You'll see the iframe nodes highlight, and when you drop the widget - the iframe node's contents are set, as intended.

Bizarre.

So this question should now be:

What have I done wrong here, to get these Nodes in the iframe positioned thusly? Is it that the Nodes are somehow cloned into the parent DOM as a proxy, or something else?

0

There are 0 answers