HTML5 / Pool I Yeah

Cette page commence à dater. Son contenu n'est peut-être plus à jour. Contactez-moi si c'est le cas!

Date de première publication : 2016/05/03

Démonstration

Je crois que vous allez vite comprendre ce qu'il va falloir programmer ...

Liste de courses

Dans un premier temps, il faut deux zones où l'on peut placer et déplacer des éléments : une zone extérieure et le panier (vous n'aviez pas reconnu ?)

<div id="dehors"></div>
<div id="panier"></div>

Dans chacune de ces zones, on placera des oeufs :

<div class="egg"></div>

Voici maintenant le code à ajouter pour le déplacement :

function drag(target, ev) {
	ev.dataTransfer.setData("Text", target.id);
	ev.dataTransfer.effectAllowed='move';
}
	
function drop(target, ev) {
	var id = ev.dataTransfer.getData("Text");
	target.appendChild(document.getElementById(id));
	ev.preventDefault();
}

On est d'accord, cela ne fait rien, il faut activer le fait que les oeufs soient déplaçables et initier le déplacement

draggable="true" ondragstart="drag(this, event)"

et le panier et l'extérieur doivent aussi être réactifs..

ondrop="drop(this, event)" ondragover="return false"

C'est HYPER important que ondragover soit désactivé car sinon le drop ne marche pas ! (l'autre technique consiste à utiliser la méthode preventDefault() sur l'événement spécifique

Les événements peuvent aussi être ajoutés avec des listeners (à faire sur un document chargé)

Ok, cela ne marche toujours pas... À votre avis que manque-t-il ?

Regardez bien le code de déplacement, il faut appel à un identifiant. Conclusion : mettez un id à la main sur chaque oeuf ou bien ajoutez les par programmation

Dernière petite chose, on peut "optimiser" les fonctions drag() et drop(). Les paramètres this ne servent à rien : pour drag(), l'élément target est l'œuf concerné par le déplacement. Pour drop(), cette fois target représente le panier.

Bestiaire

Et l'oeuf me direz-vous ? C'est seulement du CSS3... (pour une version adaptée à un navigateur non standard, cherchez dans le source de la page)

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background: radial-gradient(ellipse at top center,  #f1e767 0%,#feb645 100%);

Les couleurs ne vous semblent pas assez réalistes ? Envoyez-moi votre version !