HTML5's dataTransfer.setDragImage and Blobs

Question

Is is possible to use an image with it's src attribute as a BLOB url?

So far (have been using Chrome 66) I can set the image's src attribute using a data url, which seems to work, given that I add the image also to the document body (a bug/requirement in Chrome), but when setting the src to a Blob url (e.g. blob:http://...), I only get the default/standard gray little icon.

Has anyone has any experience with HTML5 Drag and Drop and setting the drag image?

score 2 · Answer 1 · answered Aug 23 '19 at 15:49

2

Your snippet worked successfully on Firefox 68.0 and Chromium 76.0, after removing the following lines :

div.style.zIndex = 1000;
div.style.top = '100%';
div.style.left = '100%';

and changing the div positioning to :

div.style.position = 'fixed';

answered Aug 23 '19 at 15:49

user3403511

31
5

score 0 · Accepted Answer · answered May 10 '18 at 05:05

Blobs are supported.

In my case, it was actually the width and height on the image that were being set to 0 when I was using Blobs as the additional variables I was passing with my blob URL string, were 0's, so once that was discovered and corrected, it worked beautifully.

I've put in the snippet of code for anyone who wants to know what I did...

// Sample of the `svg` variable that I was using
var svg = {
    url: 'blob:http://.....',
    width: 0,
    height: 0
};

element.addEventListener('dragstart', function(evt) {
    // This was where sometimes my SVG object had 0 values.
    var width = Math.min(Math.max(+svg.width, 50), 25),
        height = Math.min(Math.max(+svg.height, 50), 25);

    // Have wrapped it inside a DIV, as I've noticed
    // on the internet a lot of issues resolved by doing so.
    // (your choice)
    div = document.createElement('div');
    img = new Image();
    // Using unescaped '#' characters in a data URI body is deprecated and will 
    // be removed in (Chrome) M67, around May 2018. Please use '%23' instead.
    // See (https://www.chromestatus.com/features/5656049583390720 for more details).
    img.src = svg.url.replace(/[#]/igm, '%23');
    img.width = width;
    img.height = height;
    div.style.position = 'absolute';
    div.classList.add('drag-image');

    // For Chrome, we need to add the Image to the DOM Also....
    // @see (https://stackoverflow.com/questions/43790022/html5-draggable-setdragimage-doesnt-work-with-canvas-on-chrome)
    div.style.zIndex = 1000;
    div.style.top = '100%';
    div.style.left = '100%';
    div.appendChild(img);
    document.body.appendChild(div);
    evt.dataTransfer.setDragImage(div, Math.round(width/2), Math.round(height/2));
});

NOTE: Not sure how HTML5's hidden attribute will work on the added Element to the DOM. If you've got any experience on how it will work with the Drag Image, let us know with a comment below. :)

HTML5's dataTransfer.setDragImage and Blobs

2 Answers2