CODEWITHSUNDEEP
htmldrag-and-drop
Pasha
Pasha

Reputation: 6560

How to control ghost image of the dragged object in HTML5

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?

Upvotes: 0

Views: 1658

Answers (2)

Erik
Erik

Reputation: 219

The following answer might help some, but not everyone. In my case one of the divs to be dragged was just over the limit where the circular gradient transparancy sets in. The div was 250px and the limit was 249.

I solved it by adding a .dragged class on dragstart to the div with a max-height set to 239px.

In my case it works fine, but I suppose when elements are much larger, the effect won't look good.

Upvotes: 0

Tony Morello
Tony Morello

Reputation: 462

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.

Upvotes: 1

Related Questions