Question: Are there known issues with Drag and Drop on Android Chrome or am I using the Drag and Drop API incorrectly? (if neither, I’m going to assume it’s a bug and submit a report to Chrome).
Issue: I’m implementing a simple Drag and Drop interface that seems to be working fine, but is behaving strangely on 1 of 3 device/browser combinations that I’m testing. I’ve determined that the problem is in the specification of a custom MIME type 'text/x-custom-id' that I set on the dragstart event of the draggable element, but nothing I’m reading in the Living Standard or on MDN is leading me to believe that this should be a problem.
It works fine on Chrome on my desktop (Windows 10, Chrome 97.0.4692.71) and the iPhone I’m testing (iPhone 8, iOS 15.0, Chrome 94.0.4606.76), but fails on Chrome on my Galaxy S20 (Android 11, Chrome 96.0.4664.104). As soon as I revert the MIME type in draggable.setData(...) from text/x-custom-id to text/plain, all interfaces work as expected, but I’d like to have a custom ID if possible, and I haven’t found anything online that would lead me to believe that I can’t do that.
Why do I care?: I want an understanding of what’s happening most of all, but the reason for trying to use a custom MIME type at all is to bail out of the various drag... handlers on container (with an e.dataTransfer.types.includes('text/x-custom-id') check) for any other draggable interactions that may incidentally cross paths with my interface (eg: dragging a file from the OS into the browser on my page or dragging a link/URL across container).
Code (stripped as much as possible for minimal demonstration of issue):
<body>
<div id="container">I have CSS that gives me dimensions, I promise</div>
<div id="draggable-tester" draggable="true">I do, too!</div>
<script>
window.addEventListener('DOMContentLoaded', () => {
const myFirstMimeType = 'text/x-custom-id';
// Initialize draggable element.
const draggable = document.getElementById('draggable-tester');
draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData(myFirstMimeType, `Hey there, good lookin'`);
console.log('dragstart event fired');
});
draggable.addEventListener('dragend', () => {
console.log('dragend event fired');
});
// Initialize drag container and drop zone.
const dragContainer = document.getElementById('container');
dragContainer.addEventListener('dragenter', (e) => {
console.log(`dragenter w/ data: '${e.dataTransfer.getData(myFirstMimeType)}'`);
});
dragContainer.addEventListener('dragover', (e) => {
console.log(`dragover w/ data: '${e.dataTransfer.getData(myFirstMimeType)}'`);
});
dragContainer.addEventListener('dragleave', (e) => {
console.log(`dragleave w/ data: '${e.dataTransfer.getData(myFirstMimeType)}'`);
});
dragContainer.addEventListener('drop', (e) => {
console.log(`drop w/ data: '${e.dataTransfer.getData(myFirstMimeType)}'`);
});
});
</script>
</body>
Results: On desktop and iPhone, the above gives me the expected results as I execute the various drag actions on the drag container and drop the draggable element, but on Android it only logs the dragstart message (it doesn’t even log the dragend registered on draggable). As soon as I modify myFirstMimeType to be 'text/plain', it works on all devices as expected.