AngularJS - Trigger ng-mouseenter of element behind another element

Question

The <div> content inside the <td> element can be resized by dragging the bottom the of <div> down to the <td> below.

The <td> element on the other hand, has the ng-mouseenter event that triggers the resizing of the dragged <div> content.

Illustration:

1) myDiv height inherits the size of <td> element

+-------+
| myDiv |
|   =   |
+-------+
|       |
|       |
+-------+

2) When myDiv is dragged to the <td> element below, the ng-mouseenter event of <td> is triggered and multiplies the height of my myDiv based on the number of <td>'s

+-------+
| myDiv |
|       |
|       |
|       |
|   =   |
+-------+

The issue:

Since myDiv is resized, and overlaps on top of the <td> element, it seems that myDiv prevents the ng-mouseenter from firing as it resides on top of the element with the event. Thus, the use wont be able to decrease the size of myDiv. Is there a way to trigger the event even with element on top of it?

@Hadi He said `The
content inside the element `... you probably misinterpreted. — Himanshu, Apr 23 '17 at 09:24
When you say "overlapping", do you mean the div has position absolute and is floating above the table? — squgeim, Apr 23 '17 at 09:25
@Michael can you please provide a working demo here or on [JsFiddle](https://jsfiddle.net/) — Himanshu, Apr 23 '17 at 09:31
Hi @Himanshu, I'm currently working on it. Sorry if I haven't provided one yet — Michael 'Maik' Ardan, Apr 23 '17 at 09:36

score 2 · Answer 1 · edited May 23 '17 at 11:47

2

One solution, I guess, would be to set the pointer-events in the div to none once the drag has started. This would mean the pointer events will pass through the div and should be received by the td.

Look here for more: Pass mouse events through absolutely-positioned element

edited May 23 '17 at 11:47

Community

1
1

answered Apr 23 '17 at 09:27

squgeim

2,321
1
14
21

AngularJS - Trigger ng-mouseenter of element behind another element

1 Answers1