How to give height to the ghost Image of HTML draggable element?

I am building an appointment calendar where one can book slots and drag / drop the slots to change time. Each slot is draggable HTML elements. But I found an issue when we try to drag slots that are small, the preview div or the ghost image (I don't know if it's the technical term) is showing some part of the next slots. In the below image, there are 4 different slots. When I try to drag the first slot (Green in color) some parts of the second slot are also shown in the ghost image.

My guess is that ghost image size has some min-height property and can be controlled? I could be wrong and I appreciate pointers that can help me fix this issue.