Scorri utilizzando il trascinamento della selezione HTML5

Question

Ho appena scoperto che quando si utilizza il trascinamento della selezione HTML5, il tentativo di utilizzare la rotellina del mouse o il mouse per scorrere la pagina non funziona e gli ascoltatori per l'evento onmousewheel non vengono richiamati.

Come esempio vedere qui: 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)); 
    }); 

(l'esempio mostra 20 div con barra di scorrimento in modo da poter provare trascinare voce e il tentativo di scorrere la schermata del stessa ora)

Ho trovato c'è un bug aperto per FireFox per alcuni anni a questa parte: https://bugzilla.mozilla.org/show_bug.cgi?id=41708

E qualcuno ha creato un'estensione per sostenere questo comportamento: https://addons.mozilla.org/en-US/firefox/addon/drag-to-scroll-reloaded/

non ho trovato alcun bug simile a Chrome. C'è una soluzione per questo che funziona anche in Chrome?

Modifica: funziona in Safari, quindi il comportamento esiste in Chrome e Firefox.

Answer 1

Come @howderek ha dichiarato nel suo commento, trascinando lo div in fondo alla pagina si scorrerà automaticamente la pagina.

Ma è possibile utilizzare un plugin jQuery chiamato jQueryDndPageScroll. implementazione nella vostra pagina web è semplice aggiungendo queste righe al codice:

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

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

Questo plugin è open-source. Quindi puoi vedere cosa sta succedendo sotto il cofano.

In alternativa, è possibile suggerire W3C per incontrarsi per effettuare questo cross-browser. Inizia qui https://discourse.wicg.io/. È possibile avviare un forum lì e se quel forum ottiene una buona quantità di attenzione, W3C può renderlo uno standard per tutti i browser. Vedi this question per maggiori informazioni.

L'ultima opzione è un processo molto lungo e non c'è alcuna garanzia che il tuo suggerimento verrà implementato come standard. Ma se dichiari chiaramente il tuo problema e ricevi l'attenzione degli altri, c'è una buona possibilità di successo.

Answer 2

Penso che l'aggiunta di questo aiuterà

$(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(); 
}); 

Questo darà è caratteristica di trascinamento sulla base di freccia premuto

Answer 3

Credo che questa può essere una soluzione per questo problema. Su questo StackOverflow link hai una risposta con JSfiddle e puoi trascinare e scorrere allo stesso tempo.

Mentre si trascina un elemento, è possibile scorrere la pagina spostando il mouse sulla pagina superiore o inferiore per lo scorrimento automatico oppure è possibile fare clic per trascinare e ruotare la rotellina del mouse contemporaneamente.