Search code examples
htmlhtml5-draggable

Dragging a CSS scaled element removes scaling (HTML5 dragging, not jquery)

I'm creating a palette where objects can be dragged and dropped. To support smaller screen sizes and avoid a ton of calculations, I'm trying to implement css scaling on the palette itself, or on the objects with them.

I'm using HTML draggable to drag the images. However, when I drag on a scaled image, the scaling goes away, and it shows as the full size again. This makes it very difficult to understand how things will drop.

Here's a code pen, where the blue box is scaled down to half size.

https://codepen.io/daprezjer/pen/xxYzdOM

And the code for it:

<div id="container">
    <div id="dragging" draggable="true"></div>
</div>

#container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
#dragging {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: scale(.5);
}

And here's a snapshot of that codepen when you start dragging the blue box. You'll see the dragging preview doubles in size, back to it's original

enter image description here

Is there any way to keep the dragged image the same size as the scaled original?

Solution

  • transform: scale(.5);

    This line doesnt work while dragging. So better set the width and height directly using a responsive units. Secondly, you can make use of @media queries to set the size of smaller devices.