Kurztipp: Erstellen Sie mit JavaScript eine "Click and Drag" -Funktion

() translation by (you can also view the original English article)

In vielen modernen Webanwendungen suchen Entwickler nach Möglichkeiten, um die Interaktion für Benutzer einfacher und intuitiver zu gestalten. Mithilfe einer Drag & Select-Funktion können Ihre Benutzer schnell mehrere Objekte auswählen.

Schritt 1

Wir müssen zuerst die Gruppe von Objekten erstellen, die ausgewählt werden. Höchstwahrscheinlich verwenden die meisten Benutzer serverseitige Skripte wie C# oder PHP. 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 werden. Für dieses Tutorial verwende ich einfach eine Tabelle mit zwei Zeilen und fünf Zellen, die mit DIVs mit einigen grundlegenden CSS gefüllt sind, um ihnen Form zu geben.

Der wichtigste Teil beim Erstellen der Objekte sind die IDs. Sie alle müssen einen ähnlichen Namen haben. Meins wird "Box" sein - und dann eine eindeutige Nummer nach dem Namen. Folglich lautet die ID unseres ersten Elements 'box1' und unsere letzte 'box10'. Jetzt müssen wir nur noch die Mausereignisse hinzufügen. Für jeden DIV müssen wir unserer Javascript-Funktion seinen "onmousedown" zuweisen und das Objekt, das die Funktion aufruft, mit dem Schlüsselwort "this" übergeben

<table>
	<tr>
		<td><div id="1d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="2d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="3d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="4d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="5d" onmousedown="StartDragSelect(this);"></div></td>
	</tr>
	<tr>
		<td><div id="6d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="7d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="8d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="9d" onmousedown="StartDragSelect(this);"></div></td>
		<td><div id="10d" onmousedown="StartDragSelect(this);"></div></td>
	</tr>

</table>

Schritt 2

Nachdem wir unser grundlegendes HTML 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, die das Ziehen nach dem ersten Klick startet, und die Aktion, die das Ziehen stoppt. Bevor dies geschieht, müssen wir eine Javascript-Funktion erstellen und eine Variable namens 'obj' übergeben. Dies ist das Objekt, das dieses Ereignis genannt wird.

1	function StartDragSelect(obj)
2	{
3
4	}

Für die Aktion, die ausgelöst wird, nachdem ein Objekt ausgewählt oder abgewählt wurde, benötigen wir zunächst eine Möglichkeit für unsere Funktion, um festzustellen, ob dieses Objekt derzeit ausgewählt oder abgewählt ist. Sie können die meisten Attribute verwenden, um dies zu tun, aber ich finde, der beste Weg ist mit einer CSS-Klasse. Die CSS-Klasse teilt Javascript nicht nur mit, ob das Objekt ausgewählt ist oder nicht, sondern Sie können der ausgewählten Klasse auch CSS-Regeln hinzufügen, damit Benutzer visuell unterscheiden können, welche Objekte ausgewählt sind. Für das Javascript benötigen wir lediglich eine einfache if -else-Anweisung. Für diese Demo werde ich einen Bereich mit der Gesamtzahl der ausgewählten Objekte aktualisieren, aber Sie können hier auch Ajax-Funktionen und andere unterhaltsame Dinge aufrufen, um die Drag-Auswahl leistungsfähiger zu machen.

function StartDragSelect(obj)
{
	if (obj.className == "selected")
	{
		obj.className = "";
		selectNum--;
	}
	else
	{
		obj.className = "selected";
		selectNum++;
	}
	document.getElementById("selectCount").innerHTML = selectNum;
}

Um die Drag-Auswahl zu starten, verwenden wir eine "for loop", 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 Nummer hart codieren.

1	for(i=0;i<11;i++)
2	{
3	document.getElementById(i+'d').onmouseover = document.getElementById(i+'d').onmousedown
4	}

Die Stoppaktion wird dem Ereignis onmouseup des Objekts zugewiesen, das die Drag-Auswahl gestartet hat. Zu diesem Zweck verwenden wir eine anonyme Funktion, um Javascript mitzuteilen, was zu tun ist, wenn das Ereignis onmouseup ausgelöst wird. Dann verwenden wir eine "for loop", um das Ereignis onmouseup neu zuzuweisen und das Ereignis onmouseover auf null zu setzen.

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 bist fertig! Offensichtlich ist dieses Beispiel trivial und verwendet eingebettetes Javascript (der Einfachheit halber). Aber ich bin sicher, Sie können sich die Möglichkeiten vorstellen! Haben Sie einen besseren Weg?