拖动CSS缩放元素删除缩放（HTML5拖动，而不是jQuery）

发布于 2025-02-03 23:24:42 字数 1015 浏览 2 评论 0原文

我正在创建一个调色板，可以在其中拖动对象。为了支持较小的屏幕尺寸并避免进行大量计算，我正在尝试在调色板本身或对象上实现CSS缩放。

我正在使用HTML拖动来拖动图像。但是，当我在缩放图像上拖动时，缩放量会消失，并且再次显示为全尺寸。这使得很难理解事情将如何下降。

这是一支代码笔，蓝色框缩小到一半。

https://codepen.io/dapepen.io/daprezjer/pen/pen/pen/pen/xxyzdom

<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);
}

当您开始拖动蓝色框时，这是该代码蛋白的快照。您会看到拖动预览的尺寸两倍，返回原来的

有什么方法可以将拖动的图像保持与缩放原件相同的大小？

原文

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