html - HTML5拖放期间没有关键事件

Question

我有一个广泛使用 Html5 拖放的屏幕，除了拖动时的滚动行为外，它运行良好。当您拖动到窗口边缘时，屏幕会滚动，但效果不佳。现在，用户不会介意他们是否可以简单地使用向上/向下或向上/向下键滚动，但这显然不起作用!使用老式的拖放技术(例如 jquery.ui.draggable)，您不会遇到这个问题，只有在使用 draggable="true" 时才会出现这种问题。方法。
我在想我也许可以捕捉到这些事件并自己提供这种行为。所以我做了一个小测试，并将事件处理程序绑定(bind)到 window.keydown和 window.keyup猜猜看:我测试的所有浏览器都没有在拖动时触发任何关键事件。

$(window).keyup(function() {
    $('#log').append('<div>key up</div>');
});

$(window).keydown(function() {
    $('#log').append('<div>key down</div>');
});

$(window).keypress(function() {
    $('#log').append('<div>key press</div>');
});

fiddle :按下一个键，然后开始拖动 span 元素，在拖动时尝试再次按下一个键(您可能必须先单击“结果” Pane 才能获得焦点)
https://jsfiddle.net/Davy78/xkddhzts/2/
这很愚蠢，我无法向用户提供这个简单的功能请求。有谁知道任何解决方法？

Answer 1

html5 拖放 api 仅允许在拖动过程中按下“修改键”。这意味着可能会注意到诸如 shift、control、alt、command 之类的键(如果在 mac 上)。

可以在拖动事件中找到有关这些键是否被按下的信息。其他事件监听器在拖动过程中不会注意到它们。

例如

function onDrag(event) {
    if (event.shiftKey) {
        $('#log').append('<div>Shift is pressed!</div>');
    }
}

但只有在 dataTransfer 对象上设置了正确的“effectAllowed”时，该事件才会保存信息。

这些键可用的初衷是为了修改drop的效果。就像 shift 键指示您想要复制而不是移动一样，通过拖动。可以在 dataTransfer 对象上设置“effectAllowed”，并且修改键仅适用于特定的允许效果。 ( https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects)

如果您希望所有修饰键都可用，您可以设置:

event.dataTransfer.effectAllowed = 'all';

要查看结果演示，请查看此处:
https://jsfiddle.net/xkddhzts/6/

尝试拖动文本，然后同时按 shift。