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>');
});

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

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

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

Answer 1

html5拖放api只允许在拖动过程中按下“修改键”。这意味着可以注意到诸如shift，control，alt，command之类的键（如果在mac上）。

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

E.g

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键。

Answer 2

注意Keydown事件仅适用于Html对象，仅适用于焦点值可用的对象，对于div，您需要进行焦点，或者在这种情况下，您需要通过单击选择div，然后激活焦点和键事件是可行的。但首先你需要做一个盲目的事件。 here is a example code

如果您不希望选择显示，则需要添加

*:focus
{
    outline: none;
}

现在如果你想自动选择

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

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

我忘了：here is a keycode list

HTML5拖放期间没有关键事件

2 个答案: