Drag and reseize élément avec Javascript Fermé

Question

Bonjour, SVP quelqu'un peut il m'aider à résoudre ce problème. J'ai une fonction qui me permet de creer une DIV puis, d'upload des images et de les ajouter dans un iframe, ces images se placent les unes à la suite des autres. J'aimerais pouvoir déplacer et redimensionner chaque image que j'ai téléchargé dans l'iframe. J'ai tester quelques méthodes mais ça ne marche pas, donc SVP quelqu'un peut il m'aider à résoudre ce problème. Je vous remercie par avance. Editable content example Configuration: Windows / Chrome 84.0.4147.125

spacesex · Answer

Bonsoir,
à quoi sert l'Iframe exactement puisque vous parlez d'un DIV pour les contenir.

Vous parlez de drag and drop et de redimensionnement mais il n'y a rien dans le script que vous montrez dans ce sens là.
Qu'est ce qui ne marche pas  puisque ce n'est pas le drag and drop ni le redimensionnement (qui n'existe pas dans votre programme) et quelles erreurs avez vous affichées?
Partez déjà des erreurs si vous en avez pour les corriger puis en affichant les valeurs pour voir si elles correspondent à ce qu'elle doivent, avec un console.log par exemple.

Bref le débogage si vous avez des erreurs ou des fonctions qui manquent et ajouter celles ci.
Là si je comprend s bien vous avez un objet fileReader fait pour lire des fichiers dans une application et de manière asynchrone. Hors je ne voit pas de quelles applications vous faites référence ni où vous utilisez Ajax ni avez besoin de l'utiliser.
Dans ce que vous décrivez comme objectif vous parlez d'ajouter des images dans un élément de la page(ou de l'iframe) donc pour ça il vous suffit simplement d'ajouter l'élément HTML(img) correctement remplit à la suite des autres, pas besoin que quelque chose soit asynchrone(ou alors vous avez une base de données mise à jour toutes les minutes ou secondes?) puisque la programmation événementielle(les listeners) vou spermet de faire chaque action quand l'utilisateur le demande.


En vanilla JS cela donne un truc du style:

let buttonVoirImages=document.getElementById('monBoutonPorAfficherLesImages'),
/* le bouton */
containerAffichageDesimages=document.getElementById('containerAffichage'),
/* le div dont vous parlez, j'ai viré l'iframe mais c'est pareil avec une iframe, le sélecteur sera juste plus compliqué*/
listeImages=['image1.jpg', 'image2.png', 'image3.gif'];
/* pour vérifier que l'image est au bon format il suffit d'extraire chaque chaîne de caractères et vérifier que l'extension du fichier(le texte qui suit le dernier point de la chaîne ) est bien une extension autorisée, pas besoin de fileReader pour ça...)*/

buttonVoirImages.addEventListener('click',function(e){
  for(let i=0; i<listeImages.length;i++){
let tmpImage=document.createElement('IMG');
tmpImage.src=listeImages[i];
   containerAffichageDesImages.appendChild(tmpImage);
}
});

Pour le dragAnd Drop et redimensionnement il existe tout un tas d'exemples qui peuvent vous inspirer...mais déjà charger correctement les images à modifier.
En attribuant une classe(voire 2) aux éléments qui doivent être redimensionnable et peuvent être déplacés dans la page vous aurez facilement un sélecteur.

let tmpImage = createElement('img');
tmpImage.src=...;
tmpImage.className='resizable dragable';

et en JQuery

$('.draggable').click(...);

$('.resizable').dblClick(...);

En HTML 5 il y a aussi une API qui permet le dragAndDrop:

https://www.w3schools.com/HTML/html5_draganddrop.asp

Drag and reseize élément avec Javascript

1 réponse

Discussions similaires