时间戳

首页 > 解决方案 > 是否可以缩放拖动图像

javascript - 是否可以缩放拖动图像

问题描述

我正在拖放，并希望使用与默认不同的拖动图像。但我也想根据拖动开始的元素的大小来缩放拖动图像的大小。我尝试过执行以下操作：

<div id="drag-with-image" draggable="true">drag me</div>
<script>
document.getElementById("drag-with-image").addEventListener("dragstart", function(e) {
    var img = document.createElement("img");
    img.src = "https://www.w3schools.com/css/paris.jpg";
    img.style.width = "60px";
    img.style.height = "40px";
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);
</script>

但拖动图像始终显示为全尺寸。

有什么方法可以动态缩放拖动图像的大小？

标签： javascriptcss

解决方案

是的，可以缩放自定义拖动图像。

问题

如果您使用setDragImage的是图像元素，则将绘制其固有大小的图像（任何修改前的内容大小）。这意味着设置图像大小没有帮助。但是，如MDN Docs中所述，您还可以将拖动图像设置为其他内容：

如果 Element 是 img 元素，则将拖动数据存储位图设置为元素的图像（以其固有大小）；否则，将拖动数据存储位图设置为从给定元素生成的图像（当前未指定这样做的确切机制）。

此外，它还提到“其他元素”可以是任何可见元素甚至是<canvas>：

但是，如果需要自定义图像，可以使用 DataTransfer.setDragImage() 方法设置要使用的自定义图像。图像通常是一个元素，但它也可以是一个或任何其他可见元素。

解决方案

要绘制小于其固有尺寸的图像并将其设置为拖动图像，您可以：

  • 将图像加载到图像元素
  • 创建要使用图像绘制的画布
  • 绘制到画布时，相应调整绘制图像的宽度和高度

这是一个工作示例。

document.getElementById('drag-with-image').addEventListener('dragstart', function(e) {
    var img = document.createElement('img')
    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')
    // Setting img src
    img.src = 'https://www.w3schools.com/css/paris.jpg'
    
    // Drawing to canvas with a smaller size
    canvas.width = img.width * 0.1
    canvas.height = img.height * 0.1
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    
    // Setting drag image with drawn canvas image
    e.dataTransfer.setDragImage(canvas, 0, 0)
}, false)
<div id="drag-with-image" draggable="true">drag me</div>

推荐阅读