可拖动项目褪色和丑陋

Posted 2023-05-08

【中文标题】可拖动项目褪色和丑陋

【英文标题】：Draggable item faded and ugly

【发布时间】：2013-09-21 09:11:11

【问题描述】：

我正在开发一些 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>

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

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

【问题讨论】：

你能附上一张说明“丑陋”的截图吗？在我的 Mac 上的 Chrome 中，两个元素在拖动时看起来完全一样，即使我将第二个元素的宽度更改为 400 像素。

对不起，我添加了一些截图。我一直在 Windows 上进行测试。我刚刚在我的 Mac 上测试过，你是对的，那里看起来不错。

是的，在 Windows 上进行了测试，我看到元素从拖动点逐渐消失。我想这是为了向用户展示他将在哪里删除那个大元素。一种可能的解决方案是复制 google 图片搜索的行为：当您单击展开图像并拖动大图像时，它会创建一个不褪色的小版本的拖动图像。

我用 IE、firefox 和 chrome 检查它，总是 301 px 的形状有渐变（windows 10）。根据@pckill`在我的Mac上的Chrome中，两个元素看起来完全一样`，我可以假设这是Windows问题。 ps，edge没有这个效果。

@chowey 这不仅仅是宽度。一定有其他一些条件会触发这种情况，因为在同一个浏览器中，我可以在他的 JsFiddle 中重现这两种情况，但在我的项目中，无论我做什么，我都只能得到幽灵版本

【参考方案1】：

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

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

【讨论】：

感谢您的信息。我认为这可能是 Windows 本身的工作方式。它不是谷歌特有的...... Firefox 做同样的事情。但是 CSS4 的东西可能允许我调整可拖动内容的大小，绕过 Windows 内置的限制。

实际上在第二次读取时，这些选择器适用于拖放目标，而不是被拖动的东西。