• Details
• Download
• Beispiele
• Über mich

JS-Pocket-Lib

Beispiele

Verschiebbare Menüelemente

Die Klasse ListDragDropper ermöglicht das Umsortieren von UL- oder OL-Listen per "drag and drop", also durch das Verschieben der Listenelemente mit der Maus. Auf diese Weise könnte man zum Beispiel ein einfaches Menü editieren.

<ul id="menuCountries">
	<li class="notEditable"><a href="#">Afrika</a>
		<ul>
			<li><a href="#">Angola</a></li>
			<li><a href="#">Burundi</a></li>
			<li><a href="#">Elfenbeinküste</a></li>
			<li><a href="#">Ghana</a></li>
			<li><a href="#">Marokko</a></li>
			<li><a href="#">Namibia</a></li>
			<li><a href="#">Tansania</a></li>
			<li><a href="#">Tunesien</a></li>
		</ul>
	</li>
	<li class="notEditable"><a href="#">Amerika</a>
		<ul>
			<li><a href="#">Brasilien</a></li>
			<li><a href="#">Chile</a></li>
			<li><a href="#">Ecuador</a></li>
			<li><a href="#">Haiti</a></li>
			<li><a href="#">Mexiko</a></li>
			<li><a href="#">Kanada</a></li>
			<li><a href="#">Kuba</a></li>
			<li><a href="#">USA</a></li>
		</ul>
	</li>
	<li class="notEditable"><a href="#">Asien</a>
		<ul>
			<li><a href="#">Afghanistan</a></li>
			<li><a href="#">Bhutan</a></li>
			<li><a href="#">China</a></li>
			<li><a href="#">Indonesien</a></li>
			<li><a href="#">Indien</a></li>
			<li><a href="#">Laos</a></li>
			<li><a href="#">Myanmar</a></li>
			<li><a href="#">Philippinen</a></li>
			<li><a href="#">Taiwan</a></li>
		</ul>
	</li>
	<li><a href="#">Australien</a></li>
	<li class="notEditable"><a href="#">Europa</a>
		<ul>
			<li><a href="#">Belgien</a></li>
			<li><a href="#">Deutschland</a></li>
			<li><a href="#">Dänemark</a></li>
			<li><a href="#">Frankreich</a></li>
			<li><a href="#">Luxemburg</a></li>
			<li><a href="#">Niederlande</a></li>
			<li><a href="#">Österreich</a></li>
			<li><a href="#">Polen</a></li>
			<li><a href="#">Schweiz</a></li>
			<li><a href="#">Tschechien</a></li>
		</ul>
	</li>
</ul>
		

Es handelt sich um eine einfach Liste, wie im Beispiel "Ein dynamisches Menü". Lediglich die Klasse notEditable ist hier hinzugekommen. Mit dieser Klasse zeichnen wir Elemente aus, die nicht verschoben werden sollen, in unserem Beispiel alle Kontinente (wir hätten auch jeden anderen beliebigen Menüpunkt, egal in welcher Ebene, als unverschieblich deklarieren können).

Das benötigte CSS-Stylesheet dient hauptsächlich Layout-Zwecken. Wichtig ist die Definition der Klasse dragCopy. Dies ist die Klasse, die wir in unserem Beispiel der Kopie des gerade bewegten Listenelementes zuweisen. Wie man sieht, sorgen wir dafür, daß diese Kopie - quasi das Symbol, das stellvertretend für den eigentlichen Listenpunkt verschoben wird - halb transparent dargestellt wird. Im Internet Explorer führt dies dummerweise dazu, daß - je nach Sicherheitseinstellungen - eine Systemmeldung mit der Frage erscheint, ob ActiveX-Komponenten zugelassen werden sollen. In Anbetracht dieser Tatsache sollte im praktischen Einsatz für den IE besser auf die Transparenz verzichtet werden (das heißt, die filter-Angabe müßte weggelassen werden).

.dragCopy { -moz-opacity:0.6; filter:Alpha(opacity=60); }
.dragCopy ul { display:none !important; }
.dragCopy a { color:#000; text-decoration:none; font-size:10px; display:block; padding:4px; margin:0; border:2px solid #efefad; ; background-color:#f7ffce; font-weight:bold; }

ul { list-style-type:none; margin:10px 0; padding:0; width:200px; }
ul li { margin:0; display:block; padding:2px 0; }
ul li a { color:#000; text-decoration:none; font-size:12px; display:block; padding:4px; margin:0; border:2px solid #efefad; ; background-color:#f7ffce; font-weight:bold; }
ul li a:hover { background-color:yellow; }

ul ul { margin:2px 0 4px 10px; width:auto; }
ul ul li { margin:0; display:block; padding:2px 0; }
ul ul li a { font-size:10px; font-weight:normal;  }


/** now the hacks for IE **/
* html ul a, * html ul li { height:1%; } /* holly hack fix for divers IE bugs */
* html li { margin-left:-16px; mar\gin-left:0; } /* escape hack used for IE5.5 */
		

Was das benötigte Javascript im Seitenkopf angeht, so geht es - wie gewohnt - darum, das Controller-Objekt zu initialisieren, und darum, ein Objekt der ListDragDropper-Klasse zu erstellen und einige Eigenschaften dieses Objektes zu setzen. Mit setProperty() steht eine Methode zur Verfügung, mit der universell alle Eigenschaften gesetzt werden können, was uns zig Setter-Methoden erspart. Mit Hilfe dieser Methode übergeben wir unserem ListDragDropper-Objekt zunächst einmal die ID unserer Liste. Danach setzen wir die Namen der CSS-Klassen, mit denen nicht verschiebbare Elemente gekennzeichnet sind (in unserem Fall nur die eine Klasse notEditable). Und schließlich teilen wir unserer ListDragDropper-Instanz noch mit, daß sie für die Kopie des aktuell zu verschiebenden Listenpunktes die Klasse dragCopy verwenden soll, wie oben bereits angesprochen.

var myController, myDragDropper;
function initLocalObjects() {
	myDragDropper = new ListDragDropper();
	myDragDropper.setProperty('rootObjIds', new Array('menuCountries'));
	myDragDropper.setProperty('excludedClasses', new Array('notEditable'));
	myDragDropper.setProperty('draggedCopyClass', 'dragCopy');
	
	var myController = new Controller();
	myController.registerEvents(new Array('mousedown', 'mouseup', 'mousemove'));
	myController.registerClient(myDragDropper);
}
addLoadEvent(initLocalObjects);
		

Auch Nicht-Programmierer sollten damit klarkommen. Allerdings ist diese umsortierbare Liste so für sich allein natürlich reichlich nutzlos. Denkbar ist sie als Element einer komplexeren Umgebung, etwa eines Content Management-Systems, wo auf diese Weise die Navigation editiert werden könnte. Die entscheidende Ergänzung ist es, den durch das "drag and drop" erzeugten Zustand auch zu speichern, also etwa in eine Datenbank oder eine XML-Datei zu schreiben. Ob dies nun mit "AJAX" geschieht oder durch einen herkömmlichen Request, das alles bleibt Eurer Kreativität und Euren Anforderungen überlassen.

Copyright: © 2005 ff. Andreas Dölling

Kommentare zu dieser Seite

(Keine Kommentare vorhanden.)

Kommentarfunktion ausgeschaltet

Ich würde eigentlich gerne Benutzern der JS-Pocket-Lib und anderen Entwicklern die Möglichkeit bieten, schnell und bequem Kommentare und Anregungen hier zu hinterlassen, denn so ein Feedback ist sehr wichtig für die Verbesserung der Bibliothek. Da aber bereits nach wenigen Tagen die Kommentarfunktion, die ich eingebaut hatte, von zerstörungswütigen Vollidioten massivst zum Spamming mißbraucht wurde und ich auf der anderen Seite daraus auch keinen Hochsicherheitstrakt machen wollte, habe ich die Kommentarfunktion wieder entfernt. Sorry an alle normalen Besucher und fuck yourself, Spammers!