Comment aborder ce genre de cas ?
Ce cas est surtout intéressant parce qu’à partir d’une demande, il faut rechercher les solutions techniques pour y répondre.
Nous devons être en mesure de :
– disposer aléatoirement des éléments dans l’espace d’un bloc
Рpermettre leur d̩placement par drag & drop
– mettre à l’avant plan le bloc lorsqu’il est cliqué
Ces trois choses passent par du javascript, et la première chose à faire sera de trouver une librairie javascript pour gérer le "drag & drop". Une recherche rapide sur le net permet de trouver plusieurs librairies open source le permettant. Après avoir lu la documentation et regardé les démos, j’ai choisi la librairie displace, très légère et qui permet de faire le travail.
Test "hors Wordpress"
La première chose à faire est de modéliser notre demande en dehors du thème wordpress. Ça peut sembler idiot, mais parfois les librairies peuvent s’avérer difficile à mettre en place. Dominer techniquement la mise en place des éléments en htl/css/javascript est donc une bonne façon de vérifier qu’on est capable de mettre au travail la librairie. Si un problème survient qui empêche le bon fonctionnement du code, il sera plus facile de débugguer ou décider que ce n’est pas la bonne librairie pour la tâche qui nous incombe.
Voici le code qui permet de tester la base, sans le placement aléatoire, juste pour voir si le drag & drop fonctionne :
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Un test de drag & drop</title>
<script src="displace.min.js"></script>
</head>
<body>
<section id="moveable-container">
<article class="moveable">Element un<br><a href="http://www.codrdrops.net">Un lien</a></article>
<article class="moveable">Element deux</article>
<article class="moveable">Element trois</article>
<article class="moveable">Element quatre</article>
<article class="moveable">Element cinq</article>
</section>
<style>
.moveable {
position:absolute;
top:100px;
left:100px;
width:300px;
height:200px;
padding:10px;
box-sizing: border-box;
border:1px solid red;
background-color:white;
}
.active {
background-color:white;
box-shadow:5px 5px 0 rgba(255,0,0,0.2);
}
section {
border:1px solid #000;
height:70vh;
position:relative;
}
</style>
<script>
var blocsContainer=document.querySelector("#moveable-container")
var blocs=blocsContainer.querySelectorAll(".moveable")
// activer le drad & drop
const displace = window.displacejs
var zactuel=1
document.querySelectorAll('.moveable').forEach(function(elem){
var el = elem
var options = {
constrain: true,
onMouseDown: active,
onMouseUp: inactive,
}
displace(el, options)
function active(el){
el.classList.add('active')
el.style.zIndex=zactuel
zactuel++
}
function inactive(el){
el.classList.remove('active')
}
})
</script>
</body>
</html>Pour que ce code fonctionne, il faut que la librairie displace.min.js soit placée dans le même répertoire que notre page html, évidemment. On obtient après quelques mouvements, ceci :
Il manque deux choses pour ce code :
Рle placement al̩atoire des blocs
– le changement de position en cas de changement de taille de la page
Je vous épargne ces codes que je place dans la démo complète ici :
Créer un tempate part pour le code
Une fois le test réussi, on place le code dans un template part de Wordpress.
L’utilisation d’un template part n’est pas obligatoire, mais permet d’isoler facilement le code.
Voici la portion de code et la librairie displace.min.js, qui doit être placée dans le dossier assets/ (sans quoi ça ne marchera pas, évidement.
Le code pour placer ce template part dans la page home.php du thème "theme_base" :
<?php
get_template_part( 'morceaux/posts-draggable' );
?>