É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:
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:
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:
Draggable.create("#dragImg", {type:"x,y", edgeResistance:0.65, bounds:".table", throwProps:true});
