Share
In vielen modernen Webanwendungen suchen Entwickler nach Wegen, um die Interaktion der Benutzer einfacher und intuitiver zu gestalten. Eine Drag & Select-Funktion hilft Ihren Benutzern, mehrere Objekte schnell auszuwählen.
Zuerst müssen wir die Gruppe von Objekten erstellen, die ausgewählt werden soll. Wahrscheinlich werden die meisten Server serverseitige Skripts wie C # oder PHP verwenden. Da dies den Rahmen dieses Tutorials sprengt, werde ich sie stattdessen von Hand erstellen. Wir können die meisten Tags als Objekte verwenden. Die einzige Voraussetzung ist, dass dem Objekt grundlegende Mausereignisse zugewiesen sein müssen. Für dieses Tutorial werde ich einfach eine Tabelle mit zwei Zeilen und fünf Zellen verwenden, die mit DIVs mit ein paar grundlegenden CSS gefüllt sind, um ihnen Form zu geben.
Der wichtigste Teil beim Erstellen der Objekte sind die IDs; Sie müssen alle einen ähnlichen Namen haben. Meine wird "Box" sein - und dann eine eindeutige Nummer hinter dem Namen. Folglich lautet die ID unseres ersten Elements "box1" und unsere letzte ist "box10". Jetzt müssen wir nur noch die Mausereignisse hinzufügen. Für jedes DIV müssen wir unserer Javascript-Funktion "onmousedown" zuweisen und das Objekt übergeben, das die Funktion mit dem Schlüsselwort "this" aufruft
Jetzt, da wir unseren grundlegenden HTML-Code erstellt haben, müssen wir das Javascript schreiben. Unsere Javascript-Funktion besteht aus drei Hauptteilen: Die Aktion, die jedes Mal ausgeführt wird, wenn Sie ein Objekt auswählen oder die Auswahl aufheben, die Aktion, mit der das Ziehen nach dem ersten Klick gestartet wird, und die Aktion, mit der das Ziehen beendet wird. Zuvor müssen wir eine Javascript-Funktion erstellen und eine Variable namens 'obj' übergeben. Dies ist das Objekt, das dieses Ereignis genannt wird.
Funktion StartDragSelect (obj)
Für die Aktion, die ausgelöst wird, nachdem ein Objekt ausgewählt oder deaktiviert wurde, benötigen wir zunächst eine Möglichkeit für unsere Funktion, um zu erfahren, ob dieses Objekt aktuell ausgewählt oder deaktiviert ist. Sie können die meisten Attribute dafür verwenden, aber ich finde, der beste Weg ist eine CSS-Klasse. Die CSS-Klasse teilt nicht nur Javascript mit, ob das Objekt ausgewählt ist oder nicht, Sie können der ausgewählten Klasse auch CSS-Regeln hinzufügen, damit Benutzer visuell unterscheiden können, welche Objekte ausgewählt werden. Für das Javascript benötigen wir lediglich eine einfache if -else-Anweisung. Für diese Demo werde ich einen Span mit der Gesamtzahl der ausgewählten Objekte aktualisieren, aber Sie können hier auch Ajax-Funktionen und andere lustige Dinge aufrufen, um die Auswahl durch Ziehen leistungsfähiger zu gestalten.
Accentsconagua
function StartDragSelect (obj) if (obj.className == "ausgewählt") obj.className = ""; selectNum--; else obj.className = "ausgewählt"; selectNum ++; document.getElementById ("selectCount"). innerHTML = selectNum; Um die Ziehauswahl zu starten, verwenden wir eine "for-Schleife", um das Onmousedown-Ereignis jedes Objekts zu übernehmen und es dem Onmouseover-Ereignis des Objekts zuzuweisen. Wenn wir ein serverseitiges Skript verwenden, um unsere Objekte zu generieren, möchten wir auch die Gesamtzahl der Objekte an die Javascript-Funktion übergeben, damit die Schleife funktioniert. Da wir sie jedoch von Hand erstellt haben, können wir die Anzahl hart codieren.
für (i = 0; i<11;i++) document.getElementById(i+'d').onmouseover = document.getElementById(i+'d').onmousedown
Die Stop-Aktion wird dem Onmouseup-Ereignis des Objekts zugewiesen, das die Ziehauswahl gestartet hat. Dazu verwenden wir eine anonyme Funktion, um Javascript mitzuteilen, was zu tun ist, wenn das Ereignis onmouseup ausgelöst wird. Dann verwenden wir eine "for-Schleife", um das onmouseup -Ereignis neu zuzuweisen und das onmouseover -Ereignis auf Null zu setzen.
obj.onmouseup = function () für (i = 1; i<11;i++) document.getElementById(i+'d').onmousedown = document.getElementById(i+'d').onmouseover; document.getElementById(i+'d').onmouseover = null;
Sie sind fertig! Offensichtlich ist dieses Beispiel trivial und verwendet eingebettetes Javascript (der Einfachheit halber). Aber ich bin mir sicher, dass Sie sich die Möglichkeiten vorstellen können! Einen besseren Weg?
