IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Élements d'une boucle drag&drop.


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Septembre 2018
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Septembre 2018
    Messages : 3
    Par défaut Élements d'une boucle drag&drop.
    Bonjour.
    J'ai un souci avec mon code et je voudrais rendre des éléments générés "Drag&Drop"
    Je m'explique.
    J'ai une fonction qui permet d'uploader des images et celui-ci crée des thumbs de toutes les images.
    J’essaie de rendre ces thumbs drag&drop de sorte à les glisser dans deux <div> qui portent la même classe (.table).

    J'ai réussi à créer la fonction qui génère l'upload et les thumbs, j'ai également réussi à rendre les thumbs drag&drop, mais pas les deux en même temps... le drag& drop ne fonctionne chez moi que si le thumbs existe au moment du chargement de la page. Ça ne fonctionne pas si il est issue d'une boucle et c'est exactement cela dont j'ai besoin.
    Si vous avez une autre solution, je suis preneur.

    Merci.

    Pour l'upload:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
     
      for (var i = 0, f; f = files[i]; i++) {
     
        if (!f.type.match('image.*')) {
          continue;
      }
     
      var reader = new FileReader();
     
        reader.onload = (function(theFile) {
          return function(e) {
            var div = document.createElement('div');
            div.id += "dragImg";
            div.innerHTML = ['<img class="thumb" src="', e.target.result,
            '" title="', escape(theFile.name), '"/>'].join('');
            document.getElementById('workspace').insertBefore(div, null);
        };        
     
    })(f);
     
        reader.readAsDataURL(f);
    }
    }
     
     
    $('#files').change(handleFileSelect);
    Le HTML
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div class="wrapper">
    	<div class="drop">
    		<div class="cont">
    			<div class="tit">
    					Glisser<br>&<br>déposer
    			</div>
    			<div class="desc">
    					Vos fichiers ici, ou 
    			</div>
    			<div class="browse">
    					cliquer pour parcouri
    			</div>
    		</div>
    		<br>
    		<output id="list">
     
    		</output>
    		<input id="files" multiple="true" name="files[]" type="file" />
    	</div>
    </div>


    Et Greensock.js pour le drag&drop.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    Draggable.create("#dragImg", {type:"x,y", edgeResistance:0.65, bounds:".table", throwProps:true});

  2. #2
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    c'est logique, tu ne peux pas faire un "drag " d'un élément qui n'existe pas dans ta page..

  3. #3
    Candidat au Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Septembre 2018
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Septembre 2018
    Messages : 3
    Par défaut
    Pourtant ici https://fr.saxoprint.be/design-fr.as...38e13db960ceec tu peux drag&drop chacun des éléments générés.
    Comment ont-ils fait dans ce cas?

    ici aussi, les divs sont générés et sont draggables https://codepen.io/avantegarde/pen/dYYoZm

  4. #4
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    mais de quoi tu parles ????

  5. #5
    Candidat au Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Septembre 2018
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Septembre 2018
    Messages : 3
    Par défaut
    Sur le 1er lien, lors de la création de la carte, tu peux ajouter autant d'images que tu veux. Chacune d'elles peuvent êtres déplacés.

  6. #6
    Membre extrêmement actif Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 532
    Par défaut
    Bon je vais essayer de deviner, mais je vois pas le rapport avec l'utilisation d'un upload, vu que dans ton exemple sur codePen il n'y a pas d'upload.

    ton problème, c'est sans doute que tu affectes d'abord une fonction de drag à ton élément, alors qu'il n'est pas encore crée, du coup quand il arrive, il n'a aucune affectation de fonction pour être utilisable en drag'drop

Discussions similaires

  1. Drag and Drop dans une boucle
    Par vinil dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 13/07/2017, 11h22
  2. Drag and drop élement d'un treeview vers une autre
    Par djo_matrix dans le forum ASP.NET
    Réponses: 0
    Dernier message: 14/04/2009, 11h02
  3. Drag and Drop inter process entre delphi et une appli. ext.
    Par protheus dans le forum API, COM et SDKs
    Réponses: 4
    Dernier message: 03/06/2005, 22h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo