How can I set custom drag data in Safari without breaking some native drag drop behavior?

Question

<div id="container">
  <img src="https://mybackdrop.co.uk/wp-content/uploads/2017/06/space-galaxy.jpg" alt="Test image" />
</div>

I have a dragstart listener on the #container element where I set some custom data I want to pass along to any drop handler:

event.dataTransfer.setData('some-custom-drag-data-type', 'some custom data');

In Chrome when this element is dragged to my desktop (MacOS), the image is copied to the desktop. If I drag the element to the browser address bar, the url in the bar becomes the address of the image.

However in Safari, the native behavior seems to be disabled. Nothing happens if I try to drag the element to the desktop or address bar. If I try to set uri data manually like:

event.dataTransfer.setData('text/uri-list', 'https://theurloftheimage/file.png');

still nothing. I try to setData text/uri-list before and after I set my custom data, I skip setting my custom data altogether and only set text/uri-list. None of it works, it seems that by just calling setData, Safari disables some native drag/drop behavior.

This works in Chrome, you can even use it to change the image being copied to your desktop by passing in some other image url.

Is this intentional behavior by Safari or a bug? Any workaround? I suppose instead of calling setData you could just skip trying to manage custom drag information with event.dataTransfer and use your own local state variable that is set on dragstart and cleared on dragend.