-2

My page has two overlapping elements: a body that displays a DWG file, and a canvas that's only displayed when the user selects a specific option and covers the entire body. When the canvas is hidden away, the user can drag the file by clicking, holding and dragging, but when the canvas is placed over it, the option is unavailable.

I need a way to click into the canvas and drag the underlying body. So far, I've added a mousedown function that hides the div and a mouseup function that brings it back, and both are functioning as intended. However, I'm yet to find a way to "bleed" this click through to the body to make it movable as mousedown still "sees" the click into the canvas. Displaying the canvas, or moving it while the body is being moved, is not required.

I've tried using the "FireEvent" method described this question with both "click" and "mousedown" events to no avail.

Tsugihagi
  • 145
  • 6

1 Answers1

0

If I've understood the question right, you can use the pointer-events: none CSS property to click through an element.

See this Codepen to see pointer-events: none in action: https://codepen.io/trustedtomato/pen/bGdVvwX

Tamás
  • 950
  • 2
  • 10
  • 29
  • I'll try pointer events but let me know if there's anything I can add to the question to make it clearer. – Tsugihagi Feb 12 '20 at 16:46
  • I don't understand what is that div which you are hiding. – Tamás Feb 12 '20 at 16:54
  • @Tamás an overlay of sorts that displays shapes and text that can be added by the end user through various tools. These tools make simply adding pointer-events:none not viable, but I'm testing a different approach using it. I'll edit the question to add relevant code and some other details. – Tsugihagi Feb 12 '20 at 17:04