Je me suis recemment lancé dans la création d'un script de drag&drop (celui du tuto), mais j'ai un problème avec ma fonction clone, je vous joins une photo pour avoir une idée !: (je tiens à préciser que le script n'est pas totalement terminé mais il devrait déjà fonctionner si je me base au tuto.
Il ne faut pas tenir compte du cadre rouge, cette erreur(css) à été corrigée entre temps :)
Mais le problème viens du cadre noir, qui est l'objet à cloner, et le cadre bleu qui est les clone, on peut voir que dans le clone(cadre bleu) tout à été dupliqué, ce qui n'est pas vraiment le but. Mon script:( le clone() est à la ligne 60) Je tiens à préciser que le js n'est pas mon langage de prédilection , je me suis basé sur un tutoriel pour faire ça.
(function($){
var options = {
messageinspan : 'Déposez vos fichiers ici ',
urlupload : 'uploadtraitement.php',
clone: true
}
$.fn.dropfile = function(o)
{
this.each(function(){
$('<span>').addClass('textindivinstruction').append(options.messageinspan).appendTo(this);
$('<span>').addClass('progress').appendTo(this);
$(this).bind({
dragenter : function(e){
e.preventDefault();
console.log('dragenter');
},
dragover : function(e){
e.preventDefault();
$(this).addClass('hover');
console.log('dragover');
},
dragleave : function(e){
e.preventDefault();
$(this).removeClass('hover');
console.log('dragleave');
},
drop : function(e){
e.preventDefault();
console.log(e);
}
});
this.addEventListener('drop',function(e){
e.preventDefault();
var files = e.dataTransfer.files;
upload(files,$(this),0);
},false)
});
function upload (files,area,index){
var file = files[index];
var xhr = new XMLHttpRequest();
var progress = area.find('.progress');
//Evenements
xhr.addEventListener('load',function(e){
var json =jQuery.parseJSON(e.target.responseText);
area.removeClass('hover');
progress.css({height:'0%'}).html('')
if(json.error){
alert(json.error);
return false;
}
else
{
area.clone().insertAfter(area).dropfile(o);
area.append(json.content);
}
},false);
xhr.upload.addEventListener('progress',function(e){
if(e.lengthComputable){
var perc = (Math.round(e.loaded/e.total)*100)+'%';
progress.css({height:perc}).html(perc);
}
},false)
xhr.open('post',options.urlupload,true)
xhr.setRequestHeader('content-type','multipart/form-data');
xhr.setRequestHeader('x-file-type',file.type);
xhr.setRequestHeader('x-file-size',file.size);
xhr.setRequestHeader('x-file-name',file.name);
xhr.send(file);
}
}
})(jQuery);
Merci d'avance pour vos réponses !
Kazikan36!
Problème résolu il faut rajouter .html('') à la ligne : area.clone().insertAfter(area).dropfile(o); comme cela:
area.clone().html('').insertAfter(area).dropfile(o);