Rechercher
Résultats par :
Recherche avancée
Mots-clés

vider  caractères  taille  convertir  

Qui est en ligne ?
Il y a en tout 2 utilisateurs en ligne :: 0 Enregistré, 0 Invisible et 2 Invités

Aucun

Voir toute la liste


Partagez
Voir le sujet précédentAller en basVoir le sujet suivant
Member
Messages : 83
Date d'inscription : 2014-07-12
Voir le profil de l'utilisateur

Intégration d'une toile dans une boîte à texte

le Fri 30 Oct - 15:37
Pourrait-on intégrer une toile (ou directement une image) dans une boîte à texte ? Question

Cela permettrait ainsi de pouvoir d'échanger des images via la messagerie privée de Linotte, ou d'intégrer une image à un traitement de texte comme dans "P'tit texte".

Merci d'avance Smile
Member
Messages : 83
Date d'inscription : 2014-07-12
Voir le profil de l'utilisateur

Re: Intégration d'une toile dans une boîte à texte

le Sat 7 Nov - 16:40
Bon week-end à tous,
je viens de trouver un Code HTML 5, pour glisser-déposer une image dans un panier. Idea

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... Very Happy

Voici l'exemple que j'ai trouvé :
____
Exemple de code conforme au standard

La 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... Very Happy
avatar
Site Admin
Messages : 1029
Date d'inscription : 2011-11-03
Voir le profil de l'utilisateur

Re: Intégration d'une toile dans une boîte à texte

le Mon 9 Nov - 15:05
Merci pour ces infos, je vais regarder.

Mais on peut faire du drag n drop avec la toile. Tu trouveras pas mal d'exemple dans le répertoire multimédias.
Contenu sponsorisé

Re: Intégration d'une toile dans une boîte à texte

Voir le sujet précédentRevenir en hautVoir le sujet suivant
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum