Как я могу использовать события keyup с перетаскиваемыми элементами JQuery-ui?

Question

У меня есть страница с несколькими элементами, которые можно перетаскивать через JQuery-UI.

Я хочу сделать так, чтобы, когда пользователь нажимает на один из этих элементов и нажимает любую клавишу, будет вызываться другая функция для дальнейшей обработки (и проверки кода клавиши)

Учитывая HTML:

<div id="drag-el" class="drsel"> </div>

Если я использую JavaScript:

$(document).ready(function() {
    $('.drsel').each(function() {
        $(this).on('keyup', function(e) {
            alert("Keyup event");
        });
    });
});

Тогда событие никогда не сработает.

Вместо этого я должен использовать JavaScript:

$(document).ready(function() {
    $(document).on('keyup', 'body, .drsel', function() {
        alert("Keyup event");
    });
});

Однако в этом случае событие будет срабатывать только в том случае, если пользователь щелкает основное тело (т.е. не перетаскиваемый элемент), затем щелкает элемент, а затем нажимает клавишу.

Другая проблема заключается в том, что событие будет инициировано, если пользователь нажмет клавишу, когда фокус находится на теле документа, но событие никогда не сработает, если "тело" не включено в селектор.

Вот jsfiddle, с которым вы можете поиграть.

Это можно обойти? Я даже зашел так далеко, что добавил

$(document.body).focus();

к функции готовности, но обнаружил, что она работает только при первой загрузке страницы - если страница перезагружается, то это решение больше не помогает.

Answer 1

Как мы уже говорили в комментариях, вы можете обойти проблему элемента focus с событием click или mousedown:

https://jsfiddle.net/mhobd21k/3/

  $('.drsel').on('click', function(e){
    $(this).focus();
  });

ИЛИ ЖЕ

  $('.drsel').on('mousedown', function(e){
    $(this).focus();
  });