javascript - HTML5 setDragImage() : dragIcon. 宽度什么都不做

Question

当使用 HTML5 拖放 API 时，虽然 .width 属性似乎对用作拖动图标的图像宽度没有影响。以这个 fiddle 为例:http://jsfiddle.net/cnAHv/7/ .您可以将 dragIcon.width 设置为您想要的任何值，它不会改变图标的​​实际宽度。

网络上的大多数资源似乎都随意将dragIcon.width 设置为100。这只是人们在不检查功能的情况下互相复制代码的问题吗？

所以...

1. 图像变量的宽度属性实际上是 setDragImage() 会接受的东西吗？
2. 如果不是，您将如何设置图标的宽度而不用在 photoshop 等程序中手动更改图像大小？

Answer 1

当您使用 <img>在 setDragImage Javascript 将只使用实际的图像位图数据，忽略其他属性，如 width . Check the specs .

但是如果你这样做:

function handleDragStart(e) {
    var dragIcon = document.createElement('img');
    dragIcon.src = 'http://jsfiddle.net/favicon.png';
    dragIcon.width = '100';
    var div = document.createElement('div');
    div.appendChild(dragIcon);
    document.querySelector('body').appendChild(div);
    e.dataTransfer.setDragImage(div, -10, -10);
}

http://jsfiddle.net/cnAHv/9/

您会看到拖动阴影现在包含更大的图像。发生这种情况是因为当我们使用其他可见的 HTML 元素时(这就是我将 DIV 附加到主体的原因)，浏览器会将其呈现的 View 用作拖动图像。