Drei Spalten und jQuery

jQuery-Schnippelchen für eine Struktur aus drei DIVs. Im ersten liegen viele kleine .draggies, die man in das zweite DIV #aktuellesmuster ziehen und dort umarrangieren kann. Und die überschüssigen zieht man auf das dritte DIV #muellplatz wo sie vernichtet werden.

Die .draggies enthalten jeweils ein ausgeblendetes DIV.jssystxt, dessen Inhalt dann beim Speichern dem Server als Liste übergeben wird. Was im Display erscheint, ist User-Sache.

$(document).ready( function() {

	$('.draggies').draggable( { 
		helper: 'clone',
		connectToSortable: '#aktuellesmuster'
		} );

	$('#aktuellesmuster').sortable( { 
		dropOnEmpty: true, 
		connectWith: '#muellplatz' 
		} );

	$('#muellplatz').sortable( { 
		dropOnEmpty: true,
		update: function ( event, ui ) {
			$(this).text( '' );
			}
		} );

	$('#speicherknopf').click( function() {

		if( $('#speichername').text() == '' ) { 
			alert( "Kann nicht speichern: Kein Name vergeben." );
			return false;
			}

		var theOut = [];

		$('#aktuellesmuster div.jssystxt').each( function( index, elem ) {
			var theVis = $(elem).text();
			theOut[index] = theVis;
			} );

		$.post(
			'ajax.ablaufverwalten.php',
			{ ziel: $('#speichername').text(),
			 schritte: theOut },
			function( data ) { $( '#ausgabetest' ).text( data ); }
			);

		} );

	$('#neuername').click( function () {
		var neu = prompt( 'Bitte Name für das neue Template eingeben' );
		$('#speichername').text( neu.replace(/[^A-Za-z0-9\-]/g, "") );
		} );

	} );