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!

1 réponse


kazikan36
Auteur
Réponse acceptée

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