Déplacer l'ordre des éléments d'une liste en jQuery
Modifier l'ordre d'éléments en Drag and Drop dans une page web à l'aide de jQuery UI
Le code est donné dans le zip attaché à cet article.
Je me suis rendu compte après coup que ce genre de code source était dispo sur https://jqueryui.com/draggable/#sortable, et il y est même plus simple à vrai dire.
Donc ce code affiche une page web avec 4 éléments.
L'ordre de ces éléments peut être modifié par un drag and drop
Si vous regardez le code contenu dans index.htm
vous constaterez qu'on fait appel à une bibliothèque jquery et jquery ui
On charge également une fonction nommée DragAndDrop contenue dans jquery.DragAndDrop.js
Les éléments déplaçables doivent être dans une balise ul
Cette balise ul est elle même dans une div.
On assigne un nom de classe à cette div.
On passe ce nom de classe à la fonction.
Voici le code partie HTML de la page principale
<!DOCTYPE html>
<HTML lang="fr">
<HEAD>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>jQuery : déplacement d'éléments</title>
<meta name="Description" content="jQuery : page de base"/>
<meta name="author" content="Bob l'éponge" />
<meta name="Keywords" content="jQuery, base"/>
<!-- Cascading Style Sheets -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- Inclusion des scripts jQuery -->
<!-- déclaration des fichiers de scripts -->
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> <!-- Inclusion de jQuery. Attention : toutes les versions ne fonctionnent pas pour le code de drag and drop -->
<script src="js/jquery-ui-1.12.0.js" type="text/javascript"></script> <!-- Inclusion de jQuery UI -->
<script type="text/javascript" src="js/jquery.DragAndDrop.js"></script> <!-- script jQuery pour exploiter jquery ui pour faire du drag and drop d'éléments -->
</HEAD>
<BODY>
<!-- Pour la structure, ce site explique très bien : http://www.siteduzero.com/tutoriel-3-561847-structurer-sa-page.html -->
<div id="bloc_page">
<header>
<div id="titre_principal">
<h1>jQuery : déplacement d'éléments</h1> <!-- Très important pour le référencement -->
</div>
</header>
<script>
jQuery(document).ready(function(){ <!-- Traduction en langage naturel : quand votre document est prêt, jouez le code jQuery suivant -->
// Mettez ici votre code jQuery
$(".MaListe ul").DragAndDrop("MaListe"); //Pour tous les éléments ul de la classe MaListe, appel de la fonction 'DragAndDrop' qui est dans jquery.shoppingList.js. Dans la fonction DragAndDrop on passe en paramètre le nom de la classe qui contient les éléments ul sur lesquels on veut faire un Drag and Drop.
});
</script>
<div class="MaListe">
<ul>
<li><span class='item'>01 Lait</item></li>
<li><span class='item'>02 Pain</item></li>
<li><span class='item'>03 Bière</item></li>
<li><span class='item'>04 Fromage</item></li>
</ul>
</div>
</div> <!-- div bloc_page -->
</BODY>
</HTML>
Voici le code côté jQuery
(function($){
$.fn.DragAndDrop = function(MonElement) {
this.each(function(){
var obj = $(this);
//console.log( "MonElement : " + MonElement);xt() );
// Empêcher la sélection des éléments à la souris (meilleure gestion du drag & drop)
var _preventDefault = function(evt) { evt.preventDefault(); };
$("li").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);
// Initialisation du composant "sortable"
$(obj).sortable({
axis: "y", // Le sortable ne s'applique que sur l'axe vertical
containment: "." + MonElement, // Le drag ne peut sortir de l'élément qui contient la liste
handle: ".item", // Le drag ne peut se faire que sur l'élément .item (le texte)
distance: 10, // Le drag ne commence qu'à partir de 10px de distance de l'élément
// Evenement appelé lorsque l'élément est relaché
stop: function(event, ui){
// Pour chaque item de liste
$(obj).find("li").each(function(){
// On actualise sa position
index = parseInt($(this).index()+1);
// On la met à jour dans la page
$(this).find(".count").text(index);
});
}
});
// Pour chaque élément trouvé dans la liste de départ
$(obj).find("li").each(function(){
// On ajoute les contrôles
//addControls($(this));
});
});
/*
* Fonction qui ajoute les contrôles aux items
* @Paramètres
* - elt: élément courant (liste courante)
*
* @Return void
*/
function addControls(elt)
{
// En premier on ajoute un élément textuel
$(elt).html("<span class='item'>"+$(elt).text()+"</item>");
// Puis l'élément de position
//$(elt).prepend('<span class="count">'+parseInt($(elt).index()+1)+'</span>');
// Puis l'élément d'action (élément acheté)
}
// On continue le chainage JQuery
return this;
};
})(jQuery);Téléchargement(s)
| Nom | Site Web d origine | Description |
|---|---|---|
| 8803_Tut_Jquery_deplaceme... | .zip qui contient le code complet de l'exemple |
Article(s) suivant(s)