From becb9099a6c8061565bb32e2bff6d3fcc6c5ab56 Mon Sep 17 00:00:00 2001
From: Laurent Destailleur <eldy@users.sourceforge.net>
Date: Sun, 22 Aug 2010 22:49:13 +0000
Subject: [PATCH] New: Drag and drop on home page is now done by jquery

---
 htdocs/boxes.php       | 59 ++++++++++++++++++------------------------
 htdocs/lib/lib_head.js | 48 ++--------------------------------
 2 files changed, 27 insertions(+), 80 deletions(-)

diff --git a/htdocs/boxes.php b/htdocs/boxes.php
index 522eeacf519..fb45339d51c 100644
--- a/htdocs/boxes.php
+++ b/htdocs/boxes.php
@@ -55,7 +55,7 @@ function printBoxesArea($user,$areacode)
 		print '<td width="50%" valign="top" style="padding-right: 4px;">'."\n";
 
 		print "\n<!-- Box left container -->\n";
-		print '<div id="left">'."\n";
+		print '<div id="left" class="connectedSortable">'."\n";
 
 		$ii=0;
 		foreach ($boxarray as $key => $box)
@@ -90,7 +90,7 @@ function printBoxesArea($user,$areacode)
 		print '<td width="50%" valign="top" style="padding-right: 2px;">';
 
 		print "\n<!-- Box right container -->\n";
-		print '<div id="right">'."\n";
+		print '<div id="right" class="connectedSortable">'."\n";
 
 		$ii=0;
 		foreach ($boxarray as $key => $box)
@@ -130,38 +130,29 @@ function printBoxesArea($user,$areacode)
 		{
 			print "\n";
 			print '<script type="text/javascript" language="javascript">';
-			print 'function updateOrder(){';
-		    print 'var left_list = cleanSerialize(Sortable.serialize(\'left\'));';
-		    print 'var right_list = cleanSerialize(Sortable.serialize(\'right\'));';
-		    print 'var boxorder = \'A:\' + left_list + \'-B:\' + right_list;';
-		    //alert( \'boxorder=\' + boxorder );
-		    print 'var userid = \''.$user->id.'\';';
-		    print 'var url = "ajaxbox.php";';
-		    print 'o_options = new Object();';
-		    print 'o_options = {asynchronous:true,method: \'get\',parameters: \'boxorder=\' + boxorder + \'&userid=\' + userid};';
-		    print 'var myAjax = new Ajax.Request(url, o_options);';
-		  	print '}';
-		  	print "\n";
-
-		  	print '// <![CDATA['."\n";
-
-		  	print 'Sortable.create(\'left\', {'."\n";
-			print ' tag:\'div\', '."\n";
-			print ' containment:["left","right"], '."\n";
-			print ' constraint:false, '."\n";
-			print " handle: 'boxhandle',"."\n";
-			print ' onUpdate:updateOrder';
-			print " });\n";
-
-			print 'Sortable.create(\'right\', {'."\n";
-			print ' tag:\'div\', '."\n";
-			print ' containment:["right","left"], '."\n";
-			print ' constraint:false, '."\n";
-			print " handle: 'boxhandle',"."\n";
-			print ' onUpdate:updateOrder';
-			print " });\n";
-
-			print '// ]]>'."\n";
+            print 'jQuery(function() {
+                        jQuery("#left, #right").sortable({
+                            /* placeholder: \'ui-state-highlight\', */
+                            handle: \'.boxhandle\',
+                            revert: \'invalid\',
+                            items: \'.box\',
+                            containment: \'.fiche\',
+                            connectWith: \'.connectedSortable\',
+                            stop: function(event, ui) {
+                                updateOrder();
+                            }
+                        });
+                    });
+            ';
+            print "\n";
+            print 'function updateOrder(){'."\n";
+		    print 'var left_list = cleanSerialize(jQuery("#left").sortable( "serialize" ));'."\n";
+		    print 'var right_list = cleanSerialize(jQuery("#right").sortable( "serialize" ));'."\n";
+		    print 'var boxorder = \'A:\' + left_list + \'-B:\' + right_list;'."\n";
+		    //print 'alert( \'boxorder=\' + boxorder );';
+		    print 'var userid = \''.$user->id.'\';'."\n";
+		    print 'jQuery.get(\'ajaxbox.php?boxorder=\'+boxorder+\'&userid=\'+'.$user->id.');'."\n";
+		  	print '}'."\n";
 			print '</script>'."\n";
 		}
 	}
diff --git a/htdocs/lib/lib_head.js b/htdocs/lib/lib_head.js
index 32abd7e4a52..b60579b791c 100644
--- a/htdocs/lib/lib_head.js
+++ b/htdocs/lib/lib_head.js
@@ -640,7 +640,8 @@ function ac_return(field, val){
 
  
 /*=================================================================
-	Purpose:  Clean values of a "Sortable.serialize". Used by drag and drop.
+	Purpose:  Clean values of a "Sortable.serialize". 
+	          Used by drag and drop. Works for Scriptaculous and jQuery.
 	Input:    expr
 	Author:   Regis Houssin
 	Licence:  GPL
@@ -654,51 +655,6 @@ function cleanSerialize(expr) {
 }
 
 
-/*=================================================================
-	Purpose:  Show a confim popup (Use PWC)
-	Input:    title,linkurlyes,linkurlno,message,ok,cancel,objectID
-	Author:   Regis Houssin, Laurent Destailleur
-	Licence:  GPL
-==================================================================*/
-/* @deprecated Replaced by jquery code
-function dialogConfirm(title,linkurlyes,linkurlno,message,ok,cancel,objectID) {
-	Dialog.confirm(message, {
-		width:560,
-		okLabel: ok,
-		cancelLabel: cancel,
-		buttonClass: "buttonajax",
-		id: objectID,
-		destroyOnClose: true,
-		ok:function(win) {window.location.href=linkurlyes; return true;},
-		cancel:function(win) { if (linkurlno!='') { window.location.href=linkurlno; return true; } }
-	});
-}
-*/
-
-/*=================================================================
-	Purpose:  Affiche une fenetre (Use PWC)
-	Input:    message
-	Author:   Regis Houssin
-	Licence:  GPL
-==================================================================*/
-/* @deprecated Replaced by jquery code
-function dialogWindow(message,windowTitle) {
-var win = new Window({className: "dialog",  
-	                    width:600,
-	                    height:400,
-	                    zIndex: 100,
-	                    resizable: false,
-	                    title: windowTitle,
-	                    showEffect:Effect.BlindDown,
-	                    hideEffect: Effect.SwitchOff,
-	                    draggable:true
-                    })
-win.getContent().update(message);
-win.showCenter();
-}
-*/
-
-
 /*=================================================================
 Purpose:  Display a temporary message in input text fields (For showing help message on input field).
 Input:    fieldId