可拖动的项目褪色且丑陋 [英] Draggable item faded and ugly

问题描述

我正在研究一些HTML5拖放功能.我将 draggable ="true" 属性添加到我的元素中，并且效果很好，直到元素的宽度大于300px.

宽度最大为300px，拖动时显示的鬼影"图像看起来不错.

宽度大于300像素(例如301像素)的重影"图像从鼠标位置开始具有渐变淡入效果.

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

上面的项目1"看起来不错，上面的项目2"看起来很恐怖.我做了一个，但现在我认为无法正常设置其样式.只是不使用html5功能 Dragable 并让(一些)javascript来完成所有工作.

奇怪的是，为什么Google的某个人认为大于300px的元素需要某种重影"效果，而较小的则不需要.

I am working on some HTML5 drag-and-drop functionality. I add the draggable="true" property to my elements and it works great, up until the elements are wider than 300px.

Up to 300px wide, the "ghost" image that is shown while dragging looks good.

Above 300px wide (e.g. at 301px), the "ghost" image has a gradient fade starting from the mouse position.

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

"Item 1" above looks nice, "Item 2" above looks horrible. I made a jsFiddle to illustrate the point. (Tested in Chrome and Firefox.)

Is there any way to disable this, so I get the nice unfaded ghost image? I specifically want to drag around a div that is 400px wide.

解决方案

In the future w3c plans to let user set all those effects by CSS4 new pseudo-selectors http://www.w3.org/TR/selectors4/#drag-pseudos but now I think it's no possibility to style it normally. Only not using html5 feature draggable and let (some) javascript do all the job.

It's strange why someone from Google decided that elements bigger than 300px need some 'ghost' effect and smaller not.

这篇关于可拖动的项目褪色且丑陋的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！