jQuery, javascript, Glisser-déposer – Glisser-déposer, Trier, Enregistrer avec jQuery

On connait tous forcément des expressions anglophones célèbres en musique notamment Rock and Roll, R’n’B, Twist and Shout… Dans le développement avec jQuery, celle qui faut connaitre, comme en Flash, c’est le Drag-and-Drop, un glisser-déposer dans la langue de Molière. Rien à voir avec une amortie au tennis, je vous rassure tout de suite, on va voir, dans cette article, comment faire un “Glisser-déposer” combiné avec un tri et un enregistrement de ce résultat, le tout à l’aide de jQuery, of course.

N’oubliez pas d’appeler les librairies jQuery.js et jQueryUI.js

	<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
	<script src="jQueryUI.js" type="text/javascript" charset="utf-8"></script>

Beginning Javascript and CSS Development With jQuery

Un aperçu très complet des potentialités de jQuery en combinaison avec de la CSS pour créer des interfaces riches et interactives multi-plateformes.

Genre(s) : Agile, Ajax, API, IHM, jQuery, jQuery UI, Mobile, UX, Webdesign
Auteur(s) : Richard York
Edition(s) : John Wiley & Sons Ltd

+ d'infos

S’échauffer avec `sortable()`

Pour s’échauffer, on va d’abord voir tout simplement comment utiliser une fonction de tri nommée sortable(). Il faut pour cela bien sur charger la bibliothèque javascript jQuery UI

A noter, le container est, bien sûr, l’élément <ul>...</ul>, et les enfants sont les éléments sujet au tri <li>...</li> contenue dans cet élément parent.

Le code du fichier candidats_drag_and_drop_1.html

	<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
	<script src="jQueryUI.js" type="text/javascript" charset="utf-8"></script>
	<script type='text/javascript'>
 
		$(document).ready(
		  function() {
		    $('ul').sortable();
		  }
		);
 
	</script>
	<style>
	body {
	    font: 16px sans-serif;
	    background: #fff;
	    color: rgb(50, 50, 50);
	    margin: 0;
	    padding: 0;
	}
	h4 {
	    margin: 5px;    
	}
	ul {
	    list-style: none;
	    width: 250px;
	    margin: 5px;
	    padding: 0;
 
	}
	li {
	    background: #F6177B;
	    padding: 3px;
	    width: 250px;
	    border: 1px solid #666666;
		color:#fff;
	}
	</style>
	</head>
	<body>
 
 
 
 
		<h4>Quelques candidats &agrave; la pr&eacute;sidentielle 2012 en France</h4>
	    <ul>
			<li>Jean-Pierre CHEVENEMENT</li>
			<li>Fran&ccedil;ois BAYROU</li>
			<li>Herv&eacute; MORIN</li>
			<li>Corinne LEPAGE</li>
			<li>Dominique de VILLEPIN</li>
			<li>Francois HOLLANDE</li>
			<li>Nicolas SARKOZY</li>
			<li>Eva JOLY</li>
			<li>Jean-Luc MELENCHON</li>
			<li>Fr&eacute;d&eacute;ric NIHOUS</li>
			<li>Marine LE PEN</li>
			<li>Christine BOUTIN</li>
			<li>Nicolas DUPONT-AIGNAN</li>
 
	    </ul>

Le glisser-déposer sur 2 colonnes

On est toujours avec nos candidats à la présidentielle 2012, on veut classer ces candidats dans l’ordre d’arriver comme au tiercé !
Pour se faire la meilleure approche est de créer une variable globale type var $selectedNameCandidat;, ainsi à chaque fois qu’une sélection est faite, l’élément sélectionné est stocker dans cette variable. Si vous n’agissez pas de la sorte, cela va ralentir considérablement l’exécution de votre script si votre liste contient de très nombreux éléments.

Déplacement d’une colonne à une autre

Le code du fichier candidats_drag_and_drop_2.html

 
	<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
	<script src="jQueryUI.js" type="text/javascript" charset="utf-8"></script>
	<script type='text/javascript'>
 
	$(document).ready(
	  function() {
	    var $selectedNameCandidat;
 
	    $('li.CandidatName').mousedown(
	      function() {
	        if ($selectedNameCandidat && $selectedNameCandidat.length) {
	          $selectedNameCandidat.removeClass('CandidatNameSelected');
	        }
 
	        $selectedNameCandidat = $(this);        
	        $selectedNameCandidat.addClass('CandidatNameSelected');
	      }
	    );
 
	    $('ul#column-1').sortable({
	      connectWith : [
	        'ul#column-2'
	      ],
	      placeholder: 'CandidatNamePlaceholder',
	      opacity: 0.8,
	      cursor: 'move'
	    });
 
	    $('ul#column-2').sortable({
	      connectWith : [
	        'ul#column-1'
	      ],
	      placeholder: 'CandidatNamePlaceholder',
	      opacity: 0.8,
	      cursor: 'move'
	    });
	  }
	);
 
	</script>
	<style>
	html,
	body {
	    width: 100%;
	    height: 100%;    
	}
	body {
	    font: normal 12px "Lucida Grande", Arial, sans-serif;
	    color: rgb(50, 50, 50);
	    margin: 0;
	    padding: 0;
		background: #ccc;
	}
	div#hcontainer {
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 23px;
	    left: 0;
	}
	ul#column-1,
	ul#column-2 {
	    float: left;
	    height: 800px;
	    width: 300px;
	    border-bottom: 1px solid #666666;
	    border-right: 1px solid #666666;
	    background: #fff;
	    list-style: none;
	    margin: 0;
	    padding: 0;
	}
 
 
	li.CandidatName {
	    clear: both;
	    padding: 5px 5px 10px 5px;
	    min-height: 48px;
	    width: 290px;
	}
	li.CandidatName h5 {
	    font: normal 12px "Lucida Grande", Arial, sans-serif;
	    margin: 0;
	}
	h5.CandidatName {
	    padding-left: 55px;
	}
	li.CandidatNameSelected {
	    background: #F6177B;
	    color: white;
	}
	.CandidatNamePlaceholder {
	    background: #999;
	    height: 58px;
	}
 
	</style>
	</head>
	<body>
 
 
 
		<div id="hcontainer">
		<table border="0">
 
			<tr>
				<th><h1>Candidats</h1></th>
				<th><h1>Résultats</h1></th>
			</tr>
 
 
				<tr>
					<td valign="top">
						  <ul id="column-1">
						    <li class="CandidatName"><h5>Francois HOLLANDE</h5></li>
						    <li class="CandidatName"><h5>Nicolas SARKOZY</h5></li>
						    <li class="CandidatName"><h5>Jean-Pierre CHEVENEMENT</h5></li>
						    <li class="CandidatName"><h5>Fran&ccedil;ois BAYROU</h5></li>
						    <li class="CandidatName"><h5>Herv&eacute; MORIN</h5></li>
							<li class="CandidatName"><h5>Corinne LEPAGE</h5></li>
							<li class="CandidatName"><h5>Dominique de VILLEPIN</h5></li>
							<li class="CandidatName"><h5>Eva JOLY</h5></li>
							<li class="CandidatName"><h5>Jean-Luc MELENCHON</h5></li>
							<li class="CandidatName"><h5>Fr&eacute;d&eacute;ric NIHOUS</h5></li>
							<li class="CandidatName"><h5>Marine LE PEN</h5></li>
							<li class="CandidatName"><h5>Christine BOUTIN</h5></li>
							<li class="CandidatName"><h5>Nicolas DUPONT-AIGNAN</h5></li>
						</ul>
				</td>
 
					<td>
				  		<ul id="column-2">
				  		</ul>
					</td>	
				</tr>
		</table>
		</div>
 
 
	</body>
	</html>

Enregistrement de l’état des listes triées

L’étape ultime est d’utiliser JQuery pour sérialiser nos valeurs ordonnancées et les envoyer dans une boite d’alerte. En lieu et place de la boite d’alerte, cela pourrait être un script php qui permettrait l’insertion dans une base de données.
Ceux sont les attributs title de nos <li> qui vont être passés dans une chaine nommée OrderCandidates[].

	<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
	<script src="jQueryUI.js" type="text/javascript" charset="utf-8"></script>
	<script type='text/javascript'>
 
	$(document).ready(
	  function() {	  
	    var $selectedFile;
 
	    $('li.CandidatName').mousedown(
	      function() {
	        if ($selectedNameCandidat && $selectedNameCandidat.length) {
	          $selectedNameCandidat.removeClass('CandidatNameSelected');
	        }
 
	        $selectedNameCandidat = $(this);        
	        $selectedNameCandidat.addClass('CandidatNameSelected');
	      }
	    );
 
	    var saveUpdate = function(e, ui) {
	      var $data = $(this).sortable(
	        'serialize', {
	          attribute: 'title',
	          expression: /^(.*)$/,
	          key: 'OrderCandidates[]'
	        }
	      );
 
	      alert($data);
 
	    // Ici vous pouvez placer une requete ajax vers
		// un script sur votre serveur
	      // $.get('/chemin/vers/le_serveur/fichier.php', $data);
	    };
 
	    $('ul#column-1').sortable({
	      connectWith : [
	        'ul#column-2'
	      ],
	      placeholder: 'CandidatNamePlaceholder',
	      opacity: 0.8,
	      cursor: 'move',
	      update: saveUpdate
	    });
 
	    $('ul#column-2').sortable({
	      connectWith : [
	        'ul#column-1'
	      ],
	      placeholder: 'CandidatNamePlaceholder',
	      opacity: 0.8,
	      cursor: 'move',
	      update: saveUpdate
	    });
	  }
	);
 
	</script>
	<style>
 
	html,
	body {
	    width: 100%;
	    height: 100%;    
	}
	body {
	    font: normal 12px "Lucida Grande", Arial, sans-serif;
	    color: rgb(50, 50, 50);
	    margin: 0;
	    padding: 0;
		background: #ccc;
	}
	div#hcontainer {
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 23px;
	    left: 0;
	}
	ul#column-1,
	ul#column-2 {
	    float: left;
	    height: 800px;
	    width: 300px;
	    border-bottom: 1px solid #666666;
	    border-right: 1px solid #666666;
	    background: #fff;
	    list-style: none;
	    margin: 0;
	    padding: 0;
	}
 
 
	li.CandidatName {
	    clear: both;
	    padding: 5px 5px 10px 5px;
	    min-height: 48px;
	    width: 290px;
	}
	li.CandidatName h5 {
	    font: normal 12px "Lucida Grande", Arial, sans-serif;
	    margin: 0;
	}
	h5.CandidatName {
	    padding-left: 55px;
	}
	li.CandidatNameSelected {
	    /*background: #F6177B;*/
	    color: white;
	}
	.CandidatNamePlaceholder {
	    /*background: #999;*/
		background: #F6177B;
	    height: 58px;
	}
 
	</style>
	</head>
	<body>
 
		    <div id="hcontainer">
			<table border="0">
				<tr>
					<th><h1>Candidats</h1></th>
					<th><h1>R&eacute;sultats</h1></th>
				</tr>
 
 
					<tr>
						<td valign="top">
							  <ul id="column-1">
								<li class="CandidatName" title="nicolas_sarkozy"><h5>Nicolas SARKOZY</h5></li>
							    <li class="CandidatName" title="jean_pierre_chevenement"><h5>Jean-Pierre CHEVENEMENT</h5></li>
							    <li class="CandidatName" title="francois_bayrou"><h5>Fran&ccedil;ois BAYROU</h5></li>
							    <li class="CandidatName" title="herve_morin"><h5>Herv&eacute; MORIN</h5></li>
								<li class="CandidatName" title="corinne_lepage"><h5>Corinne LEPAGE</h5></li>
								<li class="CandidatName" title="dominique_de_villepin"><h5>Dominique de VILLEPIN</h5></li>
								<li class="CandidatName" title="eva_joly"><h5>Eva JOLY</h5></li>
								<li class="CandidatName" title="jean_luc_melenchon"><h5>Jean-Luc MELENCHON</h5></li>
							    <li class="CandidatName" title="francois_hollande"><h5>Francois HOLLANDE</h5></li>							
								<li class="CandidatName" title="frederic_nihous"><h5>Fr&eacute;d&eacute;ric NIHOUS</h5></li>
								<li class="CandidatName" title="marine_le_pen"><h5>Marine LE PEN</h5></li>
								<li class="CandidatName" title="christine_boutin"><h5>Christine BOUTIN</h5></li>
								<li class="CandidatName" title="nicolas_dupont_aignan"><h5>Nicolas DUPONT-AIGNAN</h5></li>
							</ul>
					</td>
 
						<td>
					  		<ul id="column-2">
					  		</ul>
						</td>	
					</tr>
			</table>
			</div>

En savoir plus

Le site jQuery, notre librairie JavaScript favorite
http://jquery.com/
Tout ce que l’on doit savoir pour être sortable()
http://jqueryui.com/demos/sortable/
Dynamic Drag’n Drop With jQuery And PHP
http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php/
Using jQuery or MooTools For Drag, Drop, Sort, Save
http://davidwalsh.name/mootools-drag-ajax
Drag & Drop with PHP & jQuery
http://papermashup.com/drag-drop-with-php-jquery/
How to save the state of a drag and drop jQuery UI Sortables front end layout editor?
http://wordpress.stackexchange.com/questions/16342/how-to-save-the-state-of-a-drag-and-drop-jquery-ui-sortables-front-end-layout-ed
Use jQuery and PHP to build an Ajax-driven Web page
http://www.ibm.com/developerworks/opensource/library/os-php-jquery-ajax/index.html

Beginning Javascript and CSS Development With jQuery

S’échauffer avec sortable()

Le glisser-déposer sur 2 colonnes

Enregistrement de l’état des listes triées

En savoir plus

Partager :

Published by Bruno Flaven

Related Posts

S’échauffer avec `sortable()`