Прокрутка при использовании html5 перетаскивания

Я просто обнаружил, что при использовании перетаскивания HTML5 - попытка использовать колесико мыши или коврик для мыши для прокрутки страницы не будет работать, и слушатели для события onmousewheel не получат вызов.

В качестве примера см. здесь: http://jsfiddle.net/92u6K/2/

JQuery

 var $dragging = null;
    $('.item').bind('dragstart', function(e) {
        $dragging = $(e.currentTarget)
    });

    $('.item').bind('dragover', function(e) {
        e.preventDefault();
        e.stopPropagation();
    });

    $('.item').bind('drop', function(e) {
        e.preventDefault();
        e.stopPropagation();

        $dragging.unbind();
        $dragging.insertBefore($(e.currentTarget));
    });

(Пример показывает 20 разделов с полосой прокрутки, чтобы вы могли попробовать      перетаскивая элемент и одновременно прокручивая экран)

Я обнаружил, что в FireFox уже несколько лет появляется ошибка: https://bugzilla.mozilla.org/show_bug.cgi?id=41708

И кто-то создал расширение для поддержки этого поведения: https://addons.mozilla.org/en-US/firefox/addon/drag-to-scroll-reloaded/

Я не мог найти подобную ошибку в Chrome. Есть ли решение для этого, которое работает и в Chrome?

Изменить. Это работает в Safari, поэтому поведение существует в Chrome и Firefox.

Ответы

Ответ 1

Как пояснил @howderek в своем комментарии, перетаскивание div в нижнюю часть страницы будет автоматически прокручивать страницу.

Но вы можете использовать плагин jQuery под названием jQueryDndPageScroll. Реализация его на вашей веб-странице так же просто добавляет эти строки в ваш код:

<script type="text/javascript" src="/js/jquery.dnd_page_scroll.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
   $().dndPageScroll();
  });
</script>

Этот плагин является открытым исходным кодом. Итак, вы можете видеть, что происходит под капотом.

В качестве альтернативы вы можете предложить W3C встретиться с этим кросс-браузером. Начните здесь https://discourse.wicg.io/. Вы можете начать форум там, и если этот форум привлечет большое внимание, W3C может сделать его стандартным для всех браузеров. См. этот вопрос для получения дополнительной информации.

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

Ответ 2

Я считаю, что это может быть решением этой проблемы. На этой fooobar.com/questions/409468/... у вас есть ответ с JSfiddle, и вы можете перетащить и прокручивать одновременно.

Когда вы перетаскиваете элемент, вы можете прокручивать страницу, перемещая мышь на верхнюю или нижнюю страницу для автоматического прокрутки, или вы можете одновременно перетаскивать и поворачивать колесико мыши.

Ответ 3

Я думаю, что добавление этого поможет

$(document).keydown(function(e) {
switch(e.which) {
    case 37: // left
    break;

    case 38: // up
    break;

    case 39: // right
    break;

    case 40: // down
    break;

    default: return; // exit this handler for other keys
}
e.preventDefault();
});

Это даст ему функцию перетаскивания на основе клавиши со стрелкой