How to control ghost image of the dragged object in HTML5

Question

I've noticed that both Chrome and Firefox will render the ghost image of the object being dragged differently depending on the width of the source element: http://jsfiddle.net/Eydnf/1/

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

The first of these DIVs will appear semi-transparent, whereas the second will be rendered with circular gradient transparency. Needless to say that such inconsistency in presentation is very undesirable (not to mention that the second DIV will be hard to see if you grab it by the corner). How can I ensure that the ghost image always renders with uniform transparency, regardless of its width?

Answer 1

In order to create a consistent Drag and Drop experience I created a jQuery plugin called Dragg.js to be used in place of the HTML5 drag and drop.

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

here is the JSFiddle and here is the plugin documentation

I hope it helps solving your problem.