In my code there are multiple divs and I have Applied css transformations to make them look like a drawer. If I define jquery droppable on one of them then the position of the droppable area is slightly different than the actual position of the translated div.
code pen - https://codepen.io/nuwandharshana1/pen/pqdQme
I have created above pen to demonstrate the current problem. In the given pen, part of the div is not identified as a droppable area. therefore draggable element reverts to its original position. expected is to set entire div as a droppable area.
Problem Occurs due to css property called perspective which defines how far the object is away from the user. closer elements looks bigger than the actual size. As in the code pen example div looks bigger than the actual size.
but jquery droppable area created based on actual div. therefore part of the div will not be identified as a droppable area. that cause draggable element reverted into its original position.