Share
I många moderna webbapplikationer söker utvecklare efter sätt att göra det enklare och mer intuitivt för användarna att interagera. En drag- och väljfunktion kan hjälpa dina användare att snabbt välja flera objekt.
Vi behöver först skapa den grupp av objekt som kommer att väljas. Mer sannolikt än inte, de flesta kommer att använda serverns script som C # eller PHP. Eftersom det ligger utanför handledningen, kommer jag istället att skapa dem för hand. Vi kan använda de flesta taggar som objekt. Det enda kravet är att objektet måste ha grundläggande mushändelser tilldelade dem. För denna handledning kommer jag helt enkelt att använda ett bord med två rader och fem celler fyllda med DIV med några grundläggande CSS för att ge dem form.
Den viktigaste delen i att skapa objekten är ID: n; de måste alla ha ett liknande namn. Mine kommer att vara "box" - och sedan ett unikt nummer efter namnet. Följaktligen kommer vårt första elements ID att vara "box1" och vår sista kommer vara "box10". Nu behöver vi bara lägga till mushändelserna. För varje DIV behöver vi tilldela sin "onmousedown" till vår javascript-funktion och passera i objektet som ringer funktionen med "det här" sökordet
Nu när vi har gjort vår grundläggande HTML, måste vi skriva javascript. Det finns tre primära delar till vår javascript-funktion: Åtgärden som händer varje gång du markerar eller avmarkerar ett objekt, den åtgärd som börjar dra efter det första klicket och den åtgärd som stoppar dragen välj. Innan något av det behöver vi göra en javascript-funktion och passera i en variabel som heter 'obj' blir det objektet som kallas denna händelse.
funktion StartDragSelect (obj)
För den åtgärd som utlöser efter att ett objekt har valts eller avmarkerat behöver vi först ett sätt för vår funktion att veta om det här objektet är valt eller avmarkerat. Du kan använda de flesta attribut för att göra det här, men jag finner det bästa sättet är med en CSS-klass. Inte bara kommer CSS-klassen att berätta javascript om objektet är valt eller inte, men du kan också lägga till CSS-regler i den valda klassen så att användarna kan visuellt skilja vilka objekt som är markerade. För javascript är allt vi behöver ett enkelt if -else uttalande. För denna demo kommer jag att uppdatera ett spann med det totala antalet utvalda objekt, men du kan också ringa ajax-funktioner och andra roliga saker här för att dra slaget välj mer kraftfullt.
Accentsconagua
funktion StartDragSelect (obj) if (obj.className == "selected") obj.className = ""; selectNum--; else obj.className = "selected"; selectNum ++; document.getElementById ("selectCount"). innerHTML = selectNum; För att starta dragväljningen använder vi en "för loop" för att ta varje objekts onmousedown-händelse och tilldela det till objektets onmouseover-händelse. Om vi använde ett serverns sidoskript för att generera våra objekt skulle vi också vilja skicka det totala antalet objekt till javascriptfunktionen så att slingan fungerar, men eftersom vi skapat dem för hand kan vi svårt koda numret.
for (i = 0; i<11;i++) document.getElementById(i+'d').onmouseover = document.getElementById(i+'d').onmousedown
Stoppåtgärden kommer att tilldelas händelsen onmouseup av objektet som startade draveläget. För att göra detta använder vi en anonym funktion för att berätta javascript vad som ska göras när onmouseup-händelsen utlöser. Då kommer vi att använda en "för loop" för att omplacera onmouseup-händelsen och göra onmouseover-händelsen noll.
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;
Du är klar! Självklart är detta exempel trivialt och använder inbäddad Javascript (för enkelhets skull). Men jag är säker på att du kan föreställa dig möjligheterna! Ha ett bättre sätt?
