Retain the space consumed by a component when it's being dragged

I think this is indeed a clear improvement:

Assigning to @balintbrews for final review 😄

This looks amazing! 🤩

I added a small commit to address two minor things:

1. Increase contrast between ghost element and already placed elements by slightly decreasing opacity;
2. Set a minimum height for the ghost element to account for newly added components where we won't have any markup rendered yet and all we have is a placeholder.

What would be nice, and I couldn't quickly find the selector for it, is to hide the name of a newly added component inside the ghost element. See on my screen capture. @gauravvvv, would you be up for taking a stab at that? If we can't easily make it happen, let's center that element inside the ghost wrapper for now, so it looks like it's intentionally there. You can do that by adding:

.sortable-ghost {
  /* ... */
  display: flex;
  justify-content: center;
  align-items: center;
}

@lauriii, sure, that's why I proposed the fallback solution that makes things better immediately. 🙂 Let me push that commit quickly, then we can wrap this up.