Bon week-end à tous,
je viens de trouver un Code HTML 5, pour glisser-déposer une image dans un panier.
On pourrait peut-être s'en inspirer, pour améliorer le Webonotte et avec un peu de chance arriver à intégrer une image dans un texte...
Voici l'exemple que j'ai trouvé :
____
Exemple de code conforme au standardLa boutique de notre exemple contient quatre objets:
Code:
<fieldset id="shop" class="shop">
<legend>La boutique</legend>
<img class="product" id="chaise" src="image/chaise.jpg" width="96" height="96">
<img class="product" id="moniteur" src="image/screen.jpg" width="96" height="96">
<img class="product" id="valise" src="image/valise.jpg" width="96" height="96">
<img class="product" id="transat" src="image/transat.jpg" width="96" height="96">
</fieldset>Il faut savoir que puisque nos objets sont des images, ils sont déplaçables par défaut. S'il s'agissait d'autres éléments, il faudrait ajouter l'attribut draggable statiquement comme ci-dessous ou dynamiquement en JavaScript, comme le fait le code plus loin:
Code:
<div class="product" draggable="true">
<img src="images/chaise.jpg" width="96" height="96">
</div>Le panier de l'utilisateur peut être tout type de balise conteneur. Comme on utilise un fieldset contenant une balise legend, on ajoute ici un calque pour avoir un conteneur vide au départ:
Code:
<fieldset id="mycart" class="cart"><legend>Mon panier</legend>
<div id="cartArea"></div>
</fieldset>Voici le code JavaScript complet, dont on va expliquer le fonctionnement plus bas:
Code:
<script>
var cartArea = document.querySelector('#cartArea');
var prods = document.querySelectorAll('.product');
for(var i = 0; i < prods.length; i++)
{
prods[i].setAttribute('draggable', 'true'); // optionnel avec des images
prods[i].addEventListener('dragstart', function(evnt) {
this.className = 'itemchoosen';
evnt.dataTransfer.effectAllowed = 'copy';
evnt.dataTransfer.setData('text', this.id);
return false;
}, false);
}
cartArea.addEventListener('dragover', function(evnt) {
if (evnt.preventDefault) evnt.preventDefault();
evnt.dataTransfer.dropEffect = 'copy';
return false;
}, false);
cartArea.addEventListener('dragenter', function(evnt) {
return false;
}, false);
cartArea.addEventListener('dragleave', function(evnt) {
return false;
}, false);
cartArea.addEventListener('drop', function(evnt) {
if (evnt.stopPropagation) evnt.stopPropagation();
var id = evnt.dataTransfer.getData('text');
var theitem = document.getElementById(id);
// theitem.parentNode.removeChild(theitem); // une option non retenue ici
theitem.className='itemblurred';
var y = document.createElement('img');
y.src = theitem.src;
cartArea.appendChild(y);
evnt.preventDefault(); // pour Firefox
return false;
}, false);
</script>Détail du code
On obtient la liste des objets HTML des produits avec la méthode querySelectorAll. C'est un choix parmi d'autre. Puis on ajoute à chaque balise représentant un produit la propriété draggable, à titre de démonstration (cela fonctionne sans, car on déplace des images). Ensuite à chaque balise on associe un évènement dragstart et une fonction qui répond à cet évènement.
Dans notre exemple, quand on initie un déplacement dans la page, l'image du produit prend une bordure rouge.
Le contenu à transférer est définit par dataTransfer.setData. On lui donne le type text et l'id de la balise représentant un produit.
Code:
var prods = document.querySelectorAll('.product');
for(var i = 0; i < prods.length; i++)
{
prods[i].setAttribute('draggable', 'true'); // optionnel avec des images
prods[i].addEventListener('dragstart', function(evnt) {
this.className = 'itemchoosen';
evnt.dataTransfer.effectAllowed = 'copy';
evnt.dataTransfer.setData('text', this.id);
return false;
}, false);
}On associe l'évènement dragEnter et dragLeave à la balise dans laquelle on veut déposer les objets. Dans notre exemple, aucun traitement n'est ajouté.
On associe aussi dragOver. C'est l'occasion d'assigner un effet.
Code:
cartArea.addEventListener('dragover', function(evnt) {
if (evnt.preventDefault) evnt.preventDefault();
evnt.dataTransfer.dropEffect = 'copy';
return false;
}, false);Et finalement on ajoute l'évènement drop qui permet d'assigner un traitement a exécuter lorsque l'objet est déposé dans le panier.
Code:
cartArea.addEventListener('drop', function(evnt) {
if (evnt.stopPropagation) evnt.stopPropagation();
var id = evnt.dataTransfer.getData('text');
var theitem = document.getElementById(id);
// theitem.parentNode.removeChild(theitem);
theitem.className='itemblurred';
var y = document.createElement('img');
y.src = theitem.src;
cartArea.appendChild(y);
evnt.preventDefault(); // for Firefox
return false;
}, false);C'est la fonction la plus complexe (dans notre exemple) et la plus importante et donc, elle mérite d'être explicitée en détails.
L'appel à stopPropagation évite de déclencher les évènements qui pourraient découler de ce que nous modifions dans la page.
On récupère le contenu de dataTransfer, en l'occurence l'id du produit.
Cela permet de placer l'élément HTML correspondant dans la variable theitem.
On peut à ce stade supprimer l'objet dans la boutique avec la méthode DOM removeChild. Cela conviendrait à certains traitements où il s'agit de déplacer des objets dans la page, mais pas à notre exemple, donc j'ai ajouté cette instruction pour mémoire en commentaire.
Pour insérer l'image dans le panier, on crée une balise image, on assigne comme source celle de l'objet déplacé, et on ajoute cette balise comme descendant du conteneur cartArea.
On annule l'exécution des évènements par défaut avec preventDefault. C'est necéssaire pour Firefox.
Ce traitement est une démonstration. On peut reprendre la structure du code et associer un traitement différent aux évènements, selon l'application à réaliser. Dans le cas d'une boutique en ligne, les objets ajoutés au panier ne sont pas supprimés de la liste originale car on peut en ajouter plusieurs au panier. Dans d'autres cas, le déplacement est matériel, on enlève l'objet en un point pour le placer dans un autre.
Le code CSS est également propre à notre exemple et répond à des choix. On peut le voir dans le source de la page de démonstration.
__________
Le lien du site est : http://www.scriptol.fr/html5/glisser-deposer-panier.php
J'ai aussi trouver cette exemple, peut-être meilleur, où l'on peut glisser-déposer une image avec un swift :
http://aya.io/blog/glisser-deposer-une-image-avec-swift/
J'espère, dans tous les cas de figures, que cela pourra t'aider, ou te donner des idées sur le sujet...
Intégration d'une toile dans une boîte à texteVen 30 Oct - 15:37
