jQuery mouse events on underlying objects while dragging image

Question

I'm trying to implement a simple drag/drop of images between panels using jQuery. While dragging I create an thumbnail image that I position under the mouse. This part all works but since the mouse now always has the thumbnail under it I don't get mouseenter/leave on the underlying drop target panels. I was hoping to use these events to highlight the drop target panel during the drag.

Is there a I can make the thumbnail not obscure these events? What else could I try to get this working?

(I don't want to use jQueryUI in this case, cause I don't need it for anything else and it seems overkill. Also, this is a bit of a learning exercise for me, so I want to understand the options :).

Answer 1

Could you not just position the thumbnail offset from the mouse, rather than underneath it? That way it's not obscuring your mouse events. Or you could get that element, and check when it enters another element bounds?

Answer 2

one option is to track mouse movement through the document and check if the cursor is within the bounds of any elements that you are concerned with in your page. you won't get the mouse events for the individual elements but you can manually track the last element the mouse passed over and determine what to do with it if the use releases the mouse button (mouse up on the document).

roughly like

var last_element = null;

function document_mousemove (e) {

    last_element = null;

    for each el in array_of_important_elements {

        if ( mouse position in el bounds ) {
            last_element = el;
        }
    }
}

function document_mouseup (e) {
    if (last_element != null) {
        // do your drop logic here
    }
}

this assumes you won't have overlapping elements that would both be considered for a drop. if that's the case you'll want to track both of them and make a determination of how to proceed on drop.