HTML5拖放期间没有关键事件

Posted 2023-05-08

【中文标题】HTML5拖放期间没有关键事件

【英文标题】：No key events during HTML5 drag and drop

【发布时间】：2015-04-22 07:55:57

【问题描述】：

我有一个广泛使用 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/

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

【参考方案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。

【讨论】：

我确实让键修饰符在 Safari 中正常工作，但在 Firefox 中不正常。在您的示例中，文本不会在 Safari 或 Firefox 中为我拖动。

【参考方案2】：

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

如果你不想选择可见你需要添加

*:focus

    outline: none;

现在如果你想自动选择

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

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

我忘了：here is a keycode list