HTML5拖放期间没有关键事件

Question

我有一个屏幕，它广泛使用Html5拖放功能，除了在拖动时的滚动行为外，它工作得很好。当你拖到窗口边缘时，屏幕会滚动，但效果不太好。现在，如果用户能够简单地使用箭头上/下或页面上/下键来滚动，那么他们就不会介意，但显然这并不起作用！使用旧式的拖放技术（例如jquery.ui.draggable），您不会遇到这个问题，只有在使用draggable="true"方法时才会出现。

我想也许我可以捕获事件并自己提供这种行为。所以我进行了一些测试，并将事件处理程序绑定到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元素，在拖动时尝试再次按下一个键（您可能需要先单击“结果”窗格以使其获得焦点）

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

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

- Davy

Answer 1

HTML5拖放API仅允许在拖动期间按下“修饰键”。这意味着可以注意到诸如Shift、Control、Alt、Command（如果在Mac上）等键。

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

例如：

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

但是只有在数据传输对象上设置了正确的“ effectAllowed”才能保留事件信息。

这些键最初被提供的目的是为了修改拖放操作的效果，比如shift键表示你想要进行复制而不是移动。可以在数据传输对象上设置“effectAllowed”，并且修改器键仅适用于特定允许的效果。（https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects）

如果您希望所有修改器键都可用，则可以设置：

event.dataTransfer.effectAllowed = 'all';

请点击此链接查看结果演示：https://jsfiddle.net/xkddhzts/6/

尝试拖动文本并同时按下shift键。

- Magnus

---

我在Safari中可以正确地使用键修饰符，但在Firefox中却不能。在您的示例中，文本在Safari或Firefox中都无法拖动。 - 1.21 gigawatts

Answer 2

注意 Keydown 事件仅适用于 Html 对象，仅适用于具有可用焦点值的对象，对于 div，您需要创建一个焦点或在这种情况下，您需要通过单击选择 div，然后激活焦点并使键事件可用。 但首先您需要创建一个盲事件。 这里是一个示例代码

如果您不想选择可见内容，则需要添加

*:focus
{
    outline: none;
}

现在如果你想要实现自动选择

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

我不知道你想做什么，但如果你想制作一个拖动事件，也许你需要使用其他方法，希望这可以帮到你。

我忘了：这里是按键代码列表。

- Jearca