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