Monday, 1 March 2021

image fading out when size is big using HTML drag

We are using drag & drop feature of HTML.

As you can see div width is 410px and if start dragging this div, its ghost image of it fades out completely. I have big/large images to display while dragging them and as they are big in size they start to fade out completely. Is there any problem ?


If I change div width to 210px then the ghost image looks fine. Then what's the problem with 410px is there any limit to it? If yes, how can I increase it ?

var els = document.getElementsByTagName('div');
for (var i = 0, l = els.length; i < l; i++) {
    els[i].addEventListener('dragstart', function (e) {
        e.dataTransfer.setData('text/plain', e.target.innerText);
    });
}
div {
    display: inline-block;
    line-height: 300px;
    text-align: center;
    background: orange;
    margin: 20px;
}
<div draggable="true" style="width:410px">Item 2</div>


from image fading out when size is big using HTML drag

No comments:

Post a Comment