当使用 HTML5 拖放 API 时,虽然 .width
属性似乎对用作拖动图标的图像宽度没有影响。以这个 fiddle 为例:http://jsfiddle.net/cnAHv/7/ .您可以将 dragIcon.width
设置为您想要的任何值,它不会改变图标的实际宽度。
网络上的大多数资源似乎都随意将dragIcon.width
设置为100。这只是人们在不检查功能的情况下互相复制代码的问题吗?
所以...
- 图像变量的宽度属性实际上是 setDragImage() 会接受的东西吗?
- 如果不是,您将如何设置图标的宽度而不用在 photoshop 等程序中手动更改图像大小?
最佳答案
当您使用 <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);
}
您会看到拖动阴影现在包含更大的图像。发生这种情况是因为当我们使用其他可见的 HTML 元素时(这就是我将 DIV 附加到主体的原因),浏览器会将其呈现的 View 用作拖动图像。
关于javascript - HTML5 setDragImage() : dragIcon. 宽度什么都不做,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26346905/