I'm coding a checker game in JavaScript/JQuery. I have the following issue: I display the yellow arrows using a canvas that covers the entire screen and has z-index: 1. The checkers are z-index: 0. I would like to add the possibility to drag and drop checkers. I want to use the JQuery's draggable widget to make every checker draggable. However, since the canvas has a higher z-index than the checkers, the latter won't receive the mouse events. How can I have the checkers received the mouse events despite having a lower z-index?
