Scriptaculous Drag&Drop

poppey · 11. Sep. 2007

Hi & servus...

ich habe ein kleines Problem und hoffe hier im Forum eine Lösung darauf zu fnden...

Da ich mich ein wenig mit dem Framework von Scriptaculous beschäftige und die enthaltene Drag & Drop Funktion nutzen möchte, habe ich diesbezüglich ein paar Fragen.

Ich hab' mir erstmal ein ganz einfaches Script gebastelt um das ganze mal zu testen. Ich erstelle 2 Listen und will diese dann jeweils in der Liste verschieben.

Das ganze klappt auch soweit, jedoch wird die integrierte Funktion onChange nicht ausgeführt und ich kann nicht ganz nachvollziehen woran das liegen könnte.

Vielleicht hat hier im Forum einer schon etwas mehr Erfahrung mit Scriptaculous und kann mir hierbei etwas unter die Arme greifen..

Hier mal mein Code:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="scripts/prototype.js"></script>
<script src="scripts/scriptaculous.js"></script>
<script type="text/javascript">
		
		/*
		*
		*	functions foor drag & drop
		*	at the beginning just with image series
		*	all others w ill follow
		*
		*/
		var elementID;
		var parameter;
		Event.observe ( window, 'load', init, false );
		
		
		function init (  ) 
			{
				/*
				*
				*	'100' is hardcoded
				*	has to be changed
				*
				*/
				for ( i = 0; i <= 100; i++ )
					{
						if ( document.getElementById ( 'list_' + i ) )
							{
								// onUpdate:function(){alert(Sortable.serialize('firstlist')+"&"+Sortable.serialize('secondlist')+"&"+Sortable.serialize('thirdlist'))
								Sortable.create( 'list_' + i,
								{ tag: 'li', /*handle:'handle', hoverclass:'over',*/ containment:['list_' + i], overlap: 'horizontal', ghosting: false, constraint: false,
								onChange: foo,
								/* onUpdate:moveElement('picPrev_' + i) */ } );
							}
					}
			}
			
		function foo ( container )
			{
				// var out = document.getElementById ( 'outPut' );
				var elementID 	= container.id;
				// alert ( container.id );
				var elementName = document.getElementById ( elementID );
				// alert ( elementName.attributes["name"].value );
				var ulName = elementName.parentNode.id;
				// alert ( elementName.parentNode.id );
				var attrib = elementName.attributes["name"].value;
				
				var url = 'c2cms_mod_pages.php?mode=TEST&attrib=' + attrib;
				// var params = Sortable.serialize('picPrev');
				var params = Sortable.serialize ( ulName );
				var ajax = new Ajax.Request ( url, {
														method: 'POST',
														parameters: params,
														onLoading: function(){$('workingMsg').show()},
														onLoaded: function(){$('workingMsg').hide()}
													}
											);
			}
			
	</script>
</head>
<body>

<?php

	function createUL ( $_elemMax, $listIndex )
		{
			$c = 0;
			$outPut = "<ul id='list_" . $listIndex . "'>";
			for ( $i = 0; $i <= $_elemMax; $i++ )
				{
					$outPut .= "<li id='elem_" . $i . "'>list element " . $i . "</li>";
				}
			$outPut .= "</ul>";
			return $outPut;
		}
	
	for ( $f = 1; $f <= 2; $f++ )
		{
			echo createUL ( 5, $f ) . "<br />";
		}
	
	if ( isset ( $_REQUEST['mode'] ) )
		{
			echo "Ajax onChange wurde erfolgreich ausgeführt!";
		}
	
?>

</body>
</html>

Schon mal vielen Dank für Eure Hilfe...
Viele Grüße
Poppey

Scriptaculous Drag&Drop

poppey

New member