When you install WPML and add languages, you will find the flags here to change site language.

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

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) : , , , , , , , ,
Auteur(s) :
Edition(s) :

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.

jQuery, javascript, sélection et filtrage - Filtrer et sélectionner avec jQuery

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
jQuery, javascript, sélection et filtrage - Filtrer et sélectionner avec jQuery

jQuery, javascript, sélection et filtrage - Filtrer et sélectionner avec jQuery

jQuery, javascript, sélection et filtrage - Filtrer et sélectionner avec jQuery

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[].

jQuery, javascript, sélection et filtrage - Filtrer et sélectionner avec jQuery

jQuery, javascript, sélection et filtrage - Filtrer et sélectionner avec jQuery

	<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