在HTML5拖放期间没有关键事件 [英] No key events during HTML5 drag and drop

问题描述

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

<我想我可以抓住事件并提供这种行为。所以我做了一点测试，并将事件处理程序绑定到window.keydown和window.keyup并猜测：我测试的所有浏览器都没有在拖动时触发任何键事件。

  $（窗口）.keyup（function（）{
 $（'＃log'）。append（'< div> key up< / div>'）; 
}）; 
 
 $（窗口）.keydown（function（）{
 $（'＃log'）。append（'< div> key down< / div>'）; 
}）; 
 
 $（窗口）.keypress（function（）{
 $（'＃log'）。append（'< div> key press< / div>'）; 
}）; 
  

小提琴：按一个键，然后开始拖动span元素，拖动时再次按一个键（您可能必须先点击结果窗格，以便它具有焦点）

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

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

解决方案

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

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

例如

  function onDrag（event）{
 if（event.shiftKey）{
 $（'＃log'）。append（'< div> Shift被按下！< / div>'）; 
} 
} 
  

但事件只会保留信息在dataTransfer对象上设置正确的effectAllowed。

这些键可用的原始意图是修改drop的效果。就像Shift键表示你想要复制而不是移动一样。可以在dataTransfer对象上设置effectAllowed，修饰键仅适用于特定的允许效果。 （ https://developer.mozilla.org/en-美国/ docs / Web /指南/ HTML / Drag_operations＃drageffects ）

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

  event.dataTransfer.effectAllowed ='all'; 
  

要查看结果的演示，请查看此处：
https://jsfiddle.net/xkddhzts/6/

尝试拖动文本，然后按shift键。

I have a screen that is extensively using Html5 drag and drop, and it works well except for the scrolling behavior while dragging. The screen will scroll when you drag to the edge of the window, but that does not work that well. Now, the users would not mind if they could simply use the arrow-up/down or page-up/down keys to scroll but this does not work apparently! Using old school drag/drop techniques (jquery.ui.draggable for instance), you do not have this problem, it is only when using the draggable="true" method.

I was thinking that i could maybe catch the events and provide this behavior msyelf. So i did a little test, and bound event handlers to window.keydown and window.keyup and guess what: none of the browsers i tested fire any key events while dragging.

$(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: press a key, then start dragging the span element, and while dragging try pressing a key again (you might have to click the "results" pane first so it has focus)

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

This is silly, i am not able to provide this simple feature request to the users. Does anyone know of any workarounds?

解决方案

The html5 drag and drop api only allows "modifier keys" to be pressed during a drag. This means that it is possible to notice keys like shift, control, alt, command (if on a mac).

Information, about if these keys are pressed or not, can be found inside the drag event. Other event listeners will not notice them during a drag.

E.g

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

But the event will only hold the information if you have set the correct "effectAllowed" on the dataTransfer object.

The original intent of these keys being available, is to modify the effect of the drop. Like the shift key indicating that you want to do a copy and not a move, with the drag. It is possible to set the "effectAllowed" on the dataTransfer object and the modifier keys only work with a specific allowed effect. (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects)

If you want all the modifier keys to be available you can set:

event.dataTransfer.effectAllowed = 'all';

To see a demo of the result please have a look here: https://jsfiddle.net/xkddhzts/6/

Try to drag the text and then at the same time press shift.

这篇关于在HTML5拖放期间没有关键事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！