HTML drag and drop API inconsistent across OS/browser

Question

I'm implementing drag and drop functionality inside a vue.js application, using the native HTML5 drag and drop API (https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)

There seems to be inconsistency with the behaviour across both Windows and OSX, as well as across browsers (Chrome, FF, and Safari).

1. On the drop event, I am attempting to check for the CTRL or META key modifier to be truthy, which always seems to be false on OSX chrome and FF (this is the CMD key on OSX), yet it's fine on windows. I am actually unable to trigger the drop event at all on OSX chrome if the CMD/META key is held (ALT key works fine, and the altKey property in the event is true, as expected)

2. On Safari, the icon next to the cursor (green plus icon) when hovering over a droppable element does not appear unless the ALT key is held.

3. On Firefox, when the CTRL/CMD key modifier is used, the element can be dropped, however like OSX chrome, the ctrlKey property is false in the event object, so I am unable to set trigger custom functionality based on whether the CTRL/CMD key is held during drag.

4. According to this SO answer here, the default behaviour is that the mousewheel is disabled, and the page should scroll when an element is dragged to the top/bottom of the screen. This isn't happening, and the mousewheel is not disabled. I am able to scroll the page using the mousewheel while dragging, yet moving a draggable element to the bottom of the screen does not scroll down. This is happening on all browsers/OS.

My current implementation:

  <div
    :draggable="!props.disableDrag"
    @dragstart="onDragStart"
    @dragend="onDragEnd"
  >

  <div
    @dragover="dragover($event)"
    @dragleave="dragleave($event)"
    @drop="drop"
  >

const onDragStart = (e: any): void => {
  dragging.value = true;
  e.dataTransfer.setData('text/plain', props.data.id);
  if (e.ctrlKey) {
    e.dataTransfer.dropEffect = 'copy';
  } else {
    e.dataTransfer.dropEffect = 'move';
  }
  emit('dragStart');
};

const drop = (e: any): void => {
  e.preventDefault();
  const data = e.dataTransfer.getData('text');
  const isCopyEvent = e.ctrlKey;
  const moveData = {
    cell: data,
    isCopyEvent
  };
  emit('dropped', moveData);
};