Discussion :

[sylv3r]

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});

[psychadelic]

c'est logique, tu ne peux pas faire un "drag " d'un élément qui n'existe pas dans ta page..

[sylv3r]

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

[psychadelic]

mais de quoi tu parles ????

[sylv3r]

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.

[psychadelic]

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

[SpaceFrog]

Tu parles d'affecter un évènement à un élément généré dynamiquement ?
Pour les rendre draggable ..
regarde du coté de delgate() avec JQUERY?
ou relance l'initialisation du dragdrop après chaque création dynamique...