Hello.
J’essaie de créer un upload d'image (de plusieurs images) qui sont draggable.
Je réussi à faire l'un et l'autre, mais pas ensemble...
C'est à dire que lorsque je upload une image avec les classes/id adéquats, l'effet drag ne s'associe pas à cette image.
Pour que l'image soit draggable, elle doit s'y trouver lors du chargement de la page, c'est à dire, dès le départ du chargement de la page.
J'essai de reproduire une boucle qui permet à chacune des images uplaodés d'être draggables.
J'essai de reproduire ceci :
https://codepen.io/avantegarde/pen/dYYoZm
mais avec des images à uploader.
Merci.
HTML
<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 parcourir
</div>
</div>
<br>
<output id="list">
</output>
<input id="files" multiple="true" name="files[]" type="file" />
</div>
</div>
Javascript
function handleFileSelect(evt) {
var files = evt.target.files;
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);
