HTML5拖放过程中没有关键事件

Question

我有一个广泛使用Html5拖放的屏幕，除了拖动时的滚动行为外，它运行良好。当您拖动到窗口的边缘时，屏幕将滚动，但效果不佳。现在，用户不介意是否可以简单地使用向上/向下箭头或向上/向下页面滚动键，但这显然不起作用！使用旧式拖放技术（例如jquery.ui.draggable），就不会出现此问题，仅当使用draggable =“ true”方法时才存在。

我以为我可以捕捉到事件并提供msyelf这种行为。因此，我进行了一些测试，并将事件处理程序绑定到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>');
});

小提琴：按下一个键，然后开始拖动span元素，并在拖动时尝试再次按下一个键（您可能必须先单击“结果”窗格以使其具有焦点）

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”后，事件才会保存信息。

这些键的原始用途是修改放置的效果。就像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。