Question

I’m implementing a drag and drop interface using Mootools, where a ghost copy of the dragged element is created and moves around with the mouse. I want the user to be able to use the mousewheel to scroll while holding this ghost element. The problem is that the ghost itself is absorbing the mousewheel event, causing it not to scroll the page behind it(in this case, a particular div with a scroll bar).

In Firefox I fixed this by applying the “pointer-events: none” style to the ghost, which causes the mousewheel event to pass right through like I want. But it seems I need a different solution for IE. I was planning on catching mousewheel events on the ghost element and forwarding them to the container div instead, but I can’t seem to make the new event trigger the standard mousewheel behavior(i.e. scroll the div). Does anyone know how I can accomplish this?

Here’s a very basic example of what I’m talking about: http://jsfiddle.net/jqL8Z/3/

Note that if you mousewheel over “Dragging Element”, the page doesn’t scroll. This is because the scrolling is part of the main div’s overflow, whereas the drag box is not a member of that div so its mouse events will bubble up to the body instead. I don’t want to make it a member of the div because then it goes invisible when dragging outside that div.

I’ve tried the following code to catch and redirect the event:

textClone.addEvent('mousewheel', function(e) {
        var mouseWheelEvent = document.createEvent('MouseEvents');
        mouseWheelEvent.initMouseEvent('mousewheel', true, true, window, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget);
        treeDiv.dispatchEvent(mouseWheelEvent);
    });

But no luck, something’s still missing.

Answer 1

What I ended up doing was changing my drag and drop logic to hold the ghost div just off to the side of the mouse instead of underneath it. That way it won’t catch any mouse events.