我正在 vue.js 应用程序中实现拖放功能，使用本机 HTML5 拖放 API (https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API）
似乎有Windows 和 OSX 以及浏览器（Chrome、FF 和 Safari）之间的行为不一致。
-
在 drop 事件中，我尝试检查 CTRL 或 META 键修饰符是否真实，这在 OSX chrome 和 FF 上似乎总是错误的（这是 OSX 上的 CMD 键），但在 Windows 上却没问题。如果按住 CMD/META 键，我实际上无法在 OSX chrome 上触发 drop 事件（ALT 键工作正常，并且事件中的 altKey 属性为 true，如预期） p>
-
在 Safari 上，当鼠标悬停在可放置元素上时，光标旁边的图标（绿色加号图标）不会出现，除非按住 ALT 键。
-
在 Firefox 上，当使用 CTRL/CMD 键修饰符时，可以删除元素，但是像 OSX chrome 一样，事件对象中的 ctrlKey 属性为 false，因此我无法设置根据拖动过程中是否按住 CTRL/CMD 键来触发自定义功能。
-
根据这个SO答案这里，默认行为是禁用鼠标滚轮，并且页面应该在以下情况下滚动：一个元素被拖动到屏幕的顶部/底部。这并没有发生，并且鼠标滚轮没有被禁用。我可以在拖动时使用鼠标滚轮滚动页面，但将可拖动元素移动到屏幕底部不会向下滚动。 所有浏览器/操作系统都会发生这种情况。
我当前的实现：
<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);
};
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).
-
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)
-
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.
-
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.
-
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);
};
发布评论