如何在HTML5中控制拖动对象的鬼影

Question

我注意到Chrome和Firefox都会根据源元素的宽度呈现被拖动对象的重影图像：http://jsfiddle.net/Eydnf/1/

<div draggable="true" style="width:230px">Example 1</div>
<div draggable="true" style="width:240px">Example 2</div>

这些DIV中的第一个将显示为半透明，而第二个将呈现为圆形渐变透明度。毋庸置疑，演示中的这种不一致是非常不可取的（更不用说如果你在角落里抓住它就很难看到第二个DIV）。如何确保重影始终以均匀的透明度呈现，无论其宽度如何？

Answer 1

为了创建一致的拖放体验，我创建了一个名为Dragg.js的jQuery插件，用于代替HTML5拖放。

<div class="draggable" style="width:230px">Example 1</div>
<div class="draggable" style="width:240px">Example 2</div>
<script>
    $('.draggable').dragg();
</script>

这里是JSFiddle，这里是plugin documentation

我希望它有助于解决您的问题。

Answer 2

以下答案可能会帮助一些人，但不是所有人。 在我的情况下，要拖动的div之一刚好超过设置圆形渐变透明度的限制。div为250px，限制为249。

我通过在dragstart上向div添加.dragged类并将max-height设置为239px来解决了这个问题。

就我而言，它可以很好地工作，但是我想当元素大得多时，效果不会很好。