I am trying to disable only a few selected mouse events on a div.

my end goal here is to create a div that I can drag a single image to and from it (which I easily done), but when the div is empty it enables me to drag whatever is placed underneath of it.

I tried to use CSS- Pointer-events: none; but it disables all events, so I can't even drag to it.

I have also tried to play around with the z-index property, but that didn't work out either. (I need the div to have a higher z-index)

I am using HTML 5 for my drag and drop, and I would like to keep it that way, and not use Jquery or other solutions that are out there.

thanks for the help.