Настроить Drag & Drop Jquery plugin для фотографий чтобы он отдавал на

Есть плагин Jquery, к сожалению я даже не знаю как он называется Но суть его в том что при загрузке фотографий он их выстраивает в канвас одну под другой

http://prntscr.com/obflmz

То же самое он читает и с бекенда если фото для данного объекта уже присутствуют Все вродебы нормально но вот почему то первую фотографию он выстраивает где то 10 ну вообщем не первой видимо проблемы с асинхронностью. Необходимо сделать Чтобы правильный порядок фотографий выставлялся при чтении их с бекенда А так же при изменениии их порядка отправлять на бекенд новый порядок фотографий {file_name,position_number}

Прошу сразу указывать цену и сроки выполнения данного задания

Вот фрагмент кода этого плагина

        var dr = function drow() {

            if(!files.lenght){

                window.deff.resolve()

            }

             var files_final=[];

            files=files_final 

            console.log('files_final',files)

           $('#sortable').html('');

            elem = '';

            for (var i = 1, f; f = files[i]; i++) {

            $('#preloader_screen').css('display','block')

            $('#preloader').css('display','block');

            $(this).disabled = true;

              if (!f.type.match('image.*')) continue;

                var fr = new FileReader();

                fr.onload = (function (theFile) {

                    return  function (e) {

                        elem = '<li style="list-style-type: none;"><canvas class="canv_image" id="' + theFile.name + '" height="300" width="300"  class="swapperbox" style="border: 1px solid; margin:10px; background-image: url('+ e.target.result +') transparent;"></canvas><button onclick="removeImg(\'' + theFile.name + '\')"  type="button" class="close" style="position: absolute;' +

                            '    margin-top: 15px;' +

                            '    margin-left: -40px;' +

                            '    background-color: transparent;' +

                            '    border-color: transparent;" data-dismiss="alert" aria-label="Close">' +

                            '    <span aria-hidden="true">&times;</span>' +

                            '  </button></li>'

                        images_list.push(theFile.name);

                        if(!$('#sortable').html().includes(theFile.name)){

                            $('#sortable').append(elem);

                            var example = document.getElementById(theFile.name),

                                ctx     = example.getContext('2d'),

                                pic     = new Image();

                            pic.src = e.target.result;

                            pic.onload = function () {

                                let coeff = "";

                                let width ="";

                                let heigth="";

                                let delta_x = '';

                                let delta_y = '';

                                if(pic.width >= pic.height){

                                    coeff = 300 / pic.width;

                                    width = 300;

                                    heigth = pic.height * coeff;

                                    delta_x = 0;

                                    delta_y = (300 - heigth)/2;

                                }else{

                                    coeff = 300 / pic.height;

                                    heigth = 300;

                                    width = pic.width * coeff;

                                    delta_x = (300 - width)/2;

                                    delta_y = 0;

                                }

                                ctx.drawImage(pic, delta_x, delta_y, width, heigth);

                            }

                        }

                        window.deff.resolve()

                    };

                })(f);

                fr.readAsDataURL(f);

            }

            $("#sortable").sortable();

        }