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

Question

我有一个广泛使用 Html5 拖放的屏幕，除了拖动时的滚动行为外，它运行良好。当您拖动到 window 的边缘时，屏幕会滚动，但效果不佳。现在，用户不会介意他们是否可以简单地使用 arrow-up/down 或 page-up/down 键来滚动，但这显然不起作用！使用老派 drag/drop 技术（例如 jquery.ui.draggable），您不会遇到此问题，只有在使用 draggable="true" 方法时才会出现此问题。

我在想我也许可以捕捉事件并自己提供这种行为。所以我做了一些测试，并将事件处理程序绑定到 window.keydown 和 window.keyup 并猜测是什么：我测试的 none 浏览器在拖动时触发任何关键事件。

$(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 元素，并在拖动时尝试再次按下一个键（您可能必须先单击“结果”窗格以使其具有焦点）

https://jsfiddle.net/Davy78/xkddhzts/2/

这太傻了，我无法向用户提供这个简单的功能请求。有人知道任何解决方法吗？

Answer 1

注意 Keydown 事件仅适用于 Html 对象，仅适用于焦点值可用的对象，对于 div 您需要聚焦，或者在这种情况下您需要选择 div 单击并下一步您已激活焦点并且关键事件可用。但首先你需要做一个盲目的事件。 here is a examplecode

如果您不想选择可见的，您需要添加

*:focus
{
    outline: none;
}

现在如果你想自动选择

$(function() {
   $('#mydiv').focus();
});

我不知道你想做什么，但如果你想做一个拖拽事件可能你需要使用其他方法，我希望这可以帮助你。

我忘记了：here is a keycode list

Answer 2

html5 拖放 api 只允许在拖动过程中按下 "modifier keys"。这意味着可以注意到 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。

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

No key events during HTML5 drag and drop

html

jquery

draggable

jquery-events