Share
In molte moderne applicazioni Web, gli sviluppatori cercano modi per rendere più semplice e intuitiva l'interazione degli utenti. Una funzione di trascinamento e selezione può aiutare gli utenti a selezionare più oggetti rapidamente.
Per prima cosa dobbiamo creare il gruppo di oggetti che saranno selezionati. Più probabile che no, molte persone useranno script lato server come C # o PHP. Dal momento che è oltre lo scopo di questo tutorial, li creerò invece a mano. Possiamo usare la maggior parte dei tag come oggetti. L'unico requisito è che all'oggetto siano assegnati eventi di base del mouse. Per questo tutorial userò semplicemente una tabella con due righe e cinque celle piene di DIV con alcuni CSS di base per dar loro forma.
La parte più importante nella creazione degli oggetti è l'ID; hanno tutti bisogno di avere un nome simile. Il mio sarà 'scatola' - e quindi un numero univoco dopo il nome. Di conseguenza, l'ID del primo elemento sarà 'box1' e l'ultimo sarà 'box10'. Ora abbiamo solo bisogno di aggiungere gli eventi del mouse. Per ogni DIV dobbiamo assegnare il suo "onmousedown" alla nostra funzione javascript e passare l'oggetto che sta chiamando la funzione con la parola chiave "this"
Ora che abbiamo fatto il nostro HTML di base, dobbiamo scrivere il javascript. Ci sono tre parti principali della nostra funzione javascript: l'azione che si verifica ogni volta che selezioni o deselezioni un oggetto, l'azione che avvia il trascinamento dopo il primo clic e l'azione che interrompe la selezione del trascinamento. Prima di tutto dobbiamo fare una funzione javascript e passare in una variabile chiamata 'obj' questo sarà l'oggetto chiamato questo evento.
function StartDragSelect (obj)
Per l'azione che si attiva dopo che un oggetto è stato selezionato o deselezionato, per prima cosa abbiamo bisogno di un modo per la nostra funzione di sapere se questo oggetto è attualmente selezionato o deselezionato. Puoi usare la maggior parte degli attributi per farlo, ma trovo che il modo migliore sia con una classe CSS. Non solo la classe CSS dirà javascript se l'oggetto è selezionato o meno, ma puoi anche aggiungere regole CSS alla classe selezionata in modo che gli utenti siano in grado di distinguere visivamente quali oggetti sono selezionati. Per il javascript, tutto ciò di cui abbiamo bisogno è una semplice istruzione if -else. Per questa demo aggiornerò una span con il numero totale di oggetti selezionati, ma potresti anche chiamare le funzioni ajax e altre cose divertenti qui per rendere la selezione più potente.
Accentsconagua
function StartDragSelect (obj) if (obj.className == "selected") obj.className = ""; selectNum--; else obj.className = "selected"; selectNum ++; document.getElementById ("selectCount"). innerHTML = selectNum; Per avviare la selezione del trascinamento, useremo un "ciclo for" per prendere l'evento onmousedown di ogni oggetto e assegnarlo all'evento onmouseover dell'oggetto. Se dovessimo usare uno script lato server per generare i nostri oggetti, vorremmo anche passare il numero totale di oggetti alla funzione javascript in modo che il ciclo funzioni, ma dal momento che li abbiamo creati a mano possiamo codificare il numero.
for (i = 0; i<11;i++) document.getElementById(i+'d').onmouseover = document.getElementById(i+'d').onmousedown
L'azione di arresto verrà assegnata all'evento onmouseup dell'oggetto che ha avviato la selezione di trascinamento. Per fare ciò useremo una funzione anonima per dire a javascript cosa fare quando si attiva l'evento onmouseup. Quindi useremo un "ciclo for" per riassegnare l'evento onmouseup e rendere nullo l'evento onmouseover.
obj.onmouseup = function () for (i = 1; i<11;i++) document.getElementById(i+'d').onmousedown = document.getElementById(i+'d').onmouseover; document.getElementById(i+'d').onmouseover = null;
Hai finito! Ovviamente, questo esempio è banale e utilizza Javascript incorporato (per semplicità). Ma sono sicuro che puoi immaginare le possibilità! Avere un modo migliore?
