Drag and reseize élément avec Javascript

Fermé

stephieker_7228 Messages postés 10 Date d'inscription mercredi 12 août 2020 Statut Membre Dernière intervention 1 septembre 2020 - 28 août 2020 à 06:22
stephieker_7228 Messages postés 10 Date d'inscription mercredi 12 août 2020 Statut Membre Dernière intervention 1 septembre 2020 - 31 août 2020 à 18:51

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.

<!DOCTYPE html>
<html>
<head>
    <title>Editable content example</title>
    <meta charset="utf-8" />
 <head>

 <!-- Fonction d'ajout d'image -->
 <script>
    function previewFiles(){
   oFrame = document.getElementById("myiframe");
   oDoc = oFrame.contentWindow.document;
      // Create a new div.
    var divimage = oDoc.createElement("div");
    divimage.setAttribute("id", "preview");
    oDoc.body.appendChild(divimage);
   
 var preview = oDoc.querySelector('#preview');
 var files   = document.querySelector('input[type=file]').files;

 function readAndPreview(file) {
 
   // Veillez à ce que `file.name` corresponde à nos critères d’extension
   if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
     var reader = new FileReader();
 
     reader.addEventListener("load", function (){
       var image = new Image();
       image.height = 80;
       image.title = file.name;
       image.src = this.result;
       preview.appendChild( image );
     }, false);
 
     reader.readAsDataURL(file);
   }
 
 }
 
 if (files) {
   
   [].forEach.call(files, readAndPreview);
 }
  
 }
 </script>
      
</head>
<body>
    <input id="browse" type="file" onchange="previewFiles()" multiple />
    <iframe class="embed-responsive-item" src="http://localhost:7007/mapage/" width="500" height="500" id="myiframe" allowfullscreen ></iframe>

</body>
</html>

Configuration: Windows / Chrome 84.0.4147.125

A voir également:

Drag and reseize élément avec Javascript
Telecharger javascript - Télécharger - Langages
Pdf element - Télécharger - PDF
Fast and furious torrent magnet ✓ - Forum Téléchargement
Element introuvable impossible de supprimer - Guide
Inspecter l'élément android - Forum Wiko

1 réponse

Réponse 1 / 1

spacesex
Modifié le 30 août 2020 à 20:26

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

stephieker_7228 Messages postés 10 Date d'inscription mercredi 12 août 2020 Statut Membre Dernière intervention 1 septembre 2020
31 août 2020 à 18:51

Bonjour, je vous remercie pour votre réponse.

Discussions similaires

Comment "inspecter l'élément" sur Mac ?

C'est quoi "drag and drop" ?

NIF c'est quoi

"Reboot and Select proper Boot Device"

Impossible de copier car cet élément est trop volumineux

Discussions similaires

Newsletters