CODEWITHSUNDEEP
jquerytypescript
James Morrison
James Morrison

Reputation: 2122

jQuery detect element under element being dragged on mouseenter/mouseleave

I've got a bit of an odd one here... I've got event listeners on both mouseenter and mouseleave events as below. 

$(".dropContainer").on("mouseenter", dropContainerEnter);
$(".dropContainer").on("mouseleave", dropContainerLeave);

...but they only seem to fire when the cursor moves over the element attached with speed and both events seem to fire simultaneously (or not at all). js fiddle below with a demonstration of the issue (console.log on each eventfiring).

https://jsfiddle.net/1b68eLdr/5341/

Essentially you drag an element from the left (test 1/ test 2...) into the right hand div, I need to be able to detect the mouse enter and leave accordingly. Can anyone show me how to fix it?

UPDATE: So I've realised the reason this is happening is because I'm dragging an element and trying to detect when the mouse moves over a div, the reason it only works at all when the cursor is moving quickly is because the cursor briefly loses the element it's dragging and can therefore detect the div.

Is there any way to make the dynamically generated element (below) "transparent" so the mouseenter event detects the div and other elements underneath it instead?

$(".dragAndDropContainer").append("<p class='clone'>" + $(target).text() + "</p>");

Upvotes: 1

Views: 129

Answers (1)

James Morrison
James Morrison

Reputation: 2122

Figured out the issue, figured i may as well post the answer on the off chance someone's had a similar issue. The original issue was that i was setting mouseenter/leave event listeners on a div and trying to detect that div while dragging another element.

The resolution was to add the below css to the element being dragged, a setting I'd never heard of till now.

pointer-events: none;

Upvotes: 1

Related Questions