html - 可拖动项目褪色和丑陋

Question

我正在开发一些 HTML5 拖放功能。我将该draggable="true"属性添加到我的元素中并且效果很好，直到元素宽度超过 300 像素。

最多 300 像素宽，拖动时显示的“幽灵”图像看起来不错。

超过 300 像素宽（例如 301 像素），“幽灵”图像从鼠标位置开始渐变。

<div draggable="true" style="width:300px">Item 1</div>
<div draggable="true" style="width:301px">Item 2</div>

上面的“项目 1”看起来不错，上面的“项目 2”看起来很糟糕。我做了一个jsFiddle来说明这一点。（在 Chrome 和 Firefox 中测试。）

有什么办法可以禁用它，所以我得到了漂亮的不褪色的幽灵图像？我特别想拖动一个 400px 宽的 div。

Answer 1

将来 w3c 计划让用户通过 CSS4 新的伪选择器设置所有这些效果http://www.w3.org/TR/selectors4/#drag-pseudos但现在我认为它不可能正常设置样式。只是不使用 html5 功能draggable，让（一些）javascript 完成所有工作。

奇怪的是为什么谷歌的某个人认为大于 300 像素的元素需要一些“幽灵”效果，而较小的则不需要。