Dnd или что делать с новым jQuery?

var $ = jQuery.noConflict(); 
 
$(document).ready(function() { 
  // В dataTransfer помещаются изображения которые перетащили в область div 
  jQuery.event.props.push('dataTransfer'); 
 
  // Максимальное количество загружаемых изображений за одни раз 
  var maxFiles = 6; 
 
  // Оповещение по умолчанию 
  var errMessage = 0; 
 
  // Кнопка выбора файлов 
  var defaultUploadBtn = $('#uploadbtn'); 
 
  // Массив для всех изображений 
  var dataArray = []; 
 
  // Область информер о загруженных изображениях - скрыта 
  // $('#uploaded-files').hide(); 
 
  // Метод при падении файла в зону загрузки 
  $('#drop-files').on('drop', function(e) { 
    // Передаем в files все полученные изображения 
    var files = e.dataTransfer.files; 
    // Проверяем на максимальное количество файлов 
    if (files.length <= maxFiles) { 
      // Передаем массив с файлами в функцию загрузки на предпросмотр 
      loadInView(files); 
    } else { 
      alert('Вы не можете загружать больше ' + maxFiles + ' изображений!'); 
      files.length = 0; 
      return; 
    } 
  }); 
 
  // При нажатии на кнопку выбора файлов 
  defaultUploadBtn.on('change', function() { 
    // Заполняем массив выбранными изображениями 
    var files = $(this)[0].files; 
    // Проверяем на максимальное количество файлов 
    if (files.length <= maxFiles) { 
      // Передаем массив с файлами в функцию загрузки на предпросмотр 
      loadInView(files); 
      // Очищаем инпут файл путем сброса формы 
      $('#frm').each(function() { 
        this.reset(); 
      }); 
    } else { 
      alert('Вы не можете загружать больше ' + maxFiles + ' изображений!'); 
      files.length = 0; 
    } 
  }); 
 
  // Функция загрузки изображений на предросмотр 
  function loadInView(files) { 
    // Показываем обасть предпросмотра 
    $('#uploaded-holder').show(); 
 
    // Для каждого файла 
    $.each(files, function(index, file) { 
 
      // Несколько оповещений при попытке загрузить не изображение 
      if (!files[index].type.match('image.*')) { 
 
        if (errMessage == 0) { 
          $('#drop-files p').html('Эй! только изображения!'); 
          ++errMessage 
        } else if (errMessage == 1) { 
          $('#drop-files p').html('Стоп! Загружаются только изображения!'); 
          ++errMessage 
        } else if (errMessage == 2) { 
          $('#drop-files p').html("Не умеешь читать? Только изображения!"); 
          ++errMessage 
        } else if (errMessage == 3) { 
          $('#drop-files p').html("Хорошо! Продолжай в том же духе"); 
          errMessage = 0; 
        } 
        return false; 
      } 
 
      // Проверяем количество загружаемых элементов 
      if ((dataArray.length + files.length) <= maxFiles) { 
        // показываем область с кнопками 
        $('#upload-button').css({ 
          'display': 'block' 
        }); 
      } else { 
        alert('Вы не можете загружать больше ' + maxFiles + ' изображений!'); 
        return; 
      } 
 
      // Создаем новый экземпляра FileReader 
      var fileReader = new FileReader(); 
      // Инициируем функцию FileReader 
      fileReader.onload = (function(file) { 
 
        return function(e) { 
          // Помещаем URI изображения в массив 
          dataArray.push({ 
            name: file.name, 
            value: this.result 
          }); 
          addImage((dataArray.length - 1)); 
        }; 
 
      })(files[index]); 
      // Производим чтение картинки по URI 
      fileReader.readAsDataURL(file); 
    }); 
    return false; 
  } 
 
  // Процедура добавления эскизов на страницу 
  function addImage(ind) { 
    // Если индекс отрицательный значит выводим весь массив изображений 
    if (ind < 0) { 
      start = 0; 
      end = dataArray.length; 
    } else { 
      // иначе только определенное изображение  
      start = ind; 
      end = ind + 1; 
    } 
    // Оповещения о загруженных файлах 
    if (dataArray.length == 0) { 
      // Если пустой массив скрываем кнопки и всю область 
      $('#upload-button').hide(); 
      $('#uploaded-holder').hide(); 
    } else if (dataArray.length == 1) { 
      $('#upload-button span').html("Был выбран 1 файл"); 
    } else { 
      $('#upload-button span').html(dataArray.length + " файлов были выбраны"); 
    } 
    // Цикл для каждого элемента массива 
    for (i = start; i < end; i++) { 
      // размещаем загруженные изображения 
      if ($('#dropped-files > .image').length <= maxFiles) { 
        $('#dropped-files').append('<div id="img-' + i + '" class="image" style="background: url(' + dataArray[i].value + '); background-size: cover;"> <a href="#" id="drop-' + i + '" class="drop-button">Удалить изображение</a></div>'); 
      } 
    } 
    return false; 
  } 
 
  // Функция удаления всех изображений 
  function restartFiles() { 
 
    // Установим бар загрузки в значение по умолчанию 
    $('#loading-bar .loading-color').css({ 
      'width': '0%' 
    }); 
    $('#loading').css({ 
      'display': 'none' 
    }); 
    $('#loading-content').html(' '); 
 
    // Удаляем все изображения на странице и скрываем кнопки 
    $('#upload-button').hide(); 
    $('#dropped-files > .image').remove(); 
    $('#uploaded-holder').hide(); 
 
    // Очищаем массив 
    dataArray.length = 0; 
 
    return false; 
  } 
 
  // Удаление только выбранного изображения  
  $("#dropped-files").on("click", "a[id^='drop']", function() { 
    // получаем название id 
    var elid = $(this).attr('id'); 
    // создаем массив для разделенных строк 
    var temp = new Array(); 
    // делим строку id на 2 части 
    temp = elid.split('-'); 
    // получаем значение после тире тоесть индекс изображения в массиве 
    dataArray.splice(temp[1], 1); 
    // Удаляем старые эскизы 
    $('#dropped-files > .image').remove(); 
    // Обновляем эскизи в соответсвии с обновленным массивом 
    addImage(-1); 
  }); 
 
  // Удалить все изображения кнопка  
  $('#dropped-files #upload-button .delete').click(restartFiles); 
 
  // Загрузка изображений на сервер 
  $('#upload-button .upload').click(function() { 
 
    // Показываем прогресс бар 
    $("#loading").show(); 
    // переменные для работы прогресс бара 
    var totalPercent = 100 / dataArray.length; 
    var x = 0; 
 
    $('#loading-content').html('Загружен ' + dataArray[0].name); 
    // Для каждого файла 
    $.each(dataArray, function(index, file) { 
      // загружаем страницу и передаем значения, используя HTTP POST запрос  
      $.post('upload.php', dataArray[index], function(data) { 
 
        var fileName = dataArray[index].name; 
        ++x; 
 
        // Изменение бара загрузки 
        $('#loading-bar .loading-color').css({ 
          'width': totalPercent * (x) + '%' 
        }); 
        // Если загрузка закончилась 
        if (totalPercent * (x) == 100) { 
          // Загрузка завершена 
          $('#loading-content').html('Загрузка завершена!'); 
 
          // Вызываем функцию удаления всех изображений после задержки 1 секунда 
          setTimeout(restartFiles, 1000); 
          // если еще продолжается загрузка	 
        } else if (totalPercent * (x) < 100) { 
          // Какой файл загружается 
          $('#loading-content').html('Загружается ' + fileName); 
        } 
 
        // Формируем в виде списка все загруженные изображения 
        // data формируется в upload.php 
        var dataSplit = data.split(':'); 
        if (dataSplit[1] == 'загружен успешно') { 
          $('#uploaded-files').append('<li><a href="images/' + dataSplit[0] + '">' + fileName + '</a> загружен успешно</li>'); 
 
        } else { 
          $('#uploaded-files').append('<li><a href="images/' + data + '. Имя файла: ' + dataArray[index].name + '</li>'); 
        } 
 
      }); 
    }); 
    // Показываем список загруженных файлов 
    $('#uploaded-files').show(); 
    return false; 
  }); 
 
  // Простые стили для области перетаскивания 
  $('#drop-files').on('dragenter', function() { 
    $(this).css({ 
      'box-shadow': 'inset 0px 0px 20px rgba(0, 0, 0, 0.1)', 
      'border': '4px dashed #bb2b2b' 
    }); 
    return false; 
  }); 
 
  $('#drop-files').on('drop', function() { 
    $(this).css({ 
      'box-shadow': 'none', 
      'border': '4px dashed rgba(0,0,0,0.2)' 
    }); 
    return false; 
  }); 
});

.content { 
  margin-top: 80px; 
  padding: 20px; 
} 
 
#drop-files { 
  position: relative; 
  width: 500px; 
  height: 140px; 
  margin: 0 auto; 
  background: rgba(0, 0, 0, 0.1); 
  border-radius: 10px; 
  border: 4px dashed rgba(0, 0, 0, 0.2); 
  padding-top: 80px; 
  text-align: center; 
  font-size: 2em; 
  font-weight: bold; 
} 
 
#drop-files p { 
  clear: none; 
  padding: 0; 
  margin: 0; 
} 
 
#uploaded-holder { 
  display: none; 
  position: relative; 
  margin: 0 auto; 
} 
 
#dropped-files { 
  display: block; 
  margin: 0 auto; 
  width: 950px; 
} 
 
#upload-button { 
  z-index: 9999; 
  display: none; 
  margin: 20px 0; 
} 
 
.drop-button { 
  display: block; 
  position: absolute; 
  z-index: 9999; 
  padding: 5px; 
  width: 100%; 
  background: rgba(0, 0, 0, 0.6); 
  font-size: 1em; 
  bottom: 0; 
  text-align: center; 
  text-decoration: none; 
  font-weight: 700; 
  color: #FFF; 
} 
 
#dropped-files .image { 
  position: relative; 
  height: 200px; 
  width: 300px; 
  border: 4px solid #fff; 
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 
  background: #fff; 
  float: left; 
  border-radius: 4px; 
  margin: 0 7px 7px 0; 
  overflow: hidden; 
} 
 
#upload-button .ss-upload { 
  font-size: 0.7em; 
} 
 
#upload-button a { 
  text-decoration: none; 
  color: #fff; 
  font-weight: bold; 
  box-shadow: 0 0 1000px 62px rgba(255, 255, 255, 1), inset 0 -35px 40px -10px #0A9FCA; 
  font-size: 20px; 
  padding: 10px 20px; 
  background-color: #4bc1e3; 
  border-radius: 10px; 
} 
 
#upload-button span { 
  position: relative; 
  text-align: center; 
  background: white; 
  border-radius: 10px; 
  font-size: 1.1em; 
  padding: 6px; 
  margin-right: 8px; 
} 
 
#upload-button a:hover { 
  box-shadow: 0 0 1000px 62px rgba(255, 255, 255, 1), inset 0 -5px 40px 0px #0A9FCA; 
} 
 
#dropped-files #upload-button .delete { 
  padding: 7px 6px 4px 6px; 
  border-radius: 100px; 
  background: rgba(0, 0, 0, 0.6); 
  box-shadow: none; 
  font-size: 1em; 
  margin-left: 8px; 
} 
 
#dropped-files #upload-button .delete:hover { 
  background: rgba(0, 0, 0, 0.8); 
} 
 
#loading { 
  display: none; 
  width: 100%; 
  position: relative; 
  margin: 20px; 
} 
 
#loading-bar { 
  width: 404px; 
  height: 40px; 
  background: #fff; 
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); 
  border-radius: 5px; 
  padding: 2px; 
} 
 
.loading-color { 
  width: 0%; 
  height: 100%; 
  -webkit-transition: all 0.1s ease-in; 
  -moz-transition: all 0.1s ease-in; 
  -ms-transition: all 0.1s ease-in; 
  -o-transition: all 0.1s ease-in; 
  transition: all 0.1s ease-in; 
  border-radius: inherit; 
  background-color: #4edbf1; 
} 
 
#loading-content { 
  position: relative; 
  top: 15px; 
  font-size: 1.2em; 
  font-weight: bold; 
  text-align: center; 
  width: 405px; 
} 
 
#file-name-holder { 
  width: 100%; 
  float: left; 
} 
 
#file-name-holder h1 { 
  text-align: center; 
  padding: 20px 0; 
  font-size: 3em; 
  margin: 0; 
} 
 
#uploaded-files { 
  width: 500px; 
  list-style: none; 
  margin: 0 auto; 
  padding: 10px; 
  color: #545454; 
} 
 
#uploaded-files li { 
  padding: 10px; 
  border-bottom: 1px solid #eee; 
  font-size: 1.5em; 
  font-weight: bold; 
  line-height: 25px; 
  color: #545454; 
} 
 
#uploaded-files a { 
  color: #1bacbf; 
} 
 
.main { 
  width: 900px; 
  margin: 0 auto; 
  height: 100%; 
  margin-top: 100px; 
} 
 
.main img { 
  position: relative; 
  float: left; 
  width: 280px; 
  height: 180px; 
  margin: 10px; 
} 
 
a.nav { 
  font-family: tahoma; 
  font-size: 20px; 
  color: #4280af; 
  text-decoration: none; 
  margin-bottom: 10px; 
} 
 
a.nav:hover { 
  color: #fffb89; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.0/jquery-migrate.min.js"></script> 
<div class="content"> 
  <center><a href="gallery.php" class="nav">Перейти в галерею</a></center> 
  <!-- Область для перетаскивания --> 
  <div id="drop-files" ondragover="return false"> 
    <p>Перетащите изображение сюда</p> 
    <form id="frm"> 
      <input type="file" id="uploadbtn" multiple /> 
    </form> 
  </div> 
  <!-- Область предпросмотра --> 
  <div id="uploaded-holder"> 
    <div id="dropped-files"> 
      <!-- Кнопки загрузить и удалить, а также количество файлов --> 
      <div id="upload-button"> 
        <center> 
          <span>0 Файлов</span> 
          <a href="#" class="upload">Загрузить</a> 
          <a href="#" class="delete">Удалить</a> 
          <!-- Прогресс бар загрузки --> 
          <div id="loading"> 
            <div id="loading-bar"> 
              <div class="loading-color"></div> 
            </div> 
            <div id="loading-content"></div> 
          </div> 
        </center> 
      </div> 
    </div> 
  </div> 
  <!-- Список загруженных файлов --> 
  <div id="file-name-holder"> 
    <ul id="uploaded-files"> 
      <h1>Загруженные файлы</h1> 
    </ul> 
  </div> 
 
</div>