Example Drop

$(document).ready(function(){

  Dropzone.autoDiscover = false;

  $("#new_upload").dropzone({
    maxFilesize: 1,
    paramName: "upload[image]",
    addRemoveLinks: true,
    dictRemoveFile: "Delete",

    //to show existing images from db
    init: function() {
      var thisDropZone = this;
      $.getJSON('upload_list', function(data) {
        $.each(data, function(index, val) {
          var mockFile = { name: val.name, size: val.size };
          thisDropZone.emit("addedfile", mockFile);
          thisDropZone.emit("thumbnail", mockFile, val.path);
          $(mockFile.previewTemplate).find('.dz-remove').attr('id', val.id);

          // adding id attribute for serialize
          $(".dz-preview:last-child").attr('id', "image_" + val.id);
        });
      });
    },

    success: function(file, response){
      $(file.previewTemplate).find('.dz-remove').attr('id', response.fileID);
      $(file.previewElement).addClass("dz-success");

      var order = $('.dropzone').sortable('serialize');
      $.ajax({
        type: 'POST',
        url: '/uploads/sort',
        data: order,
        success: function(data){
          console.log(data);
        }
      });
    },

    removedfile: function(file){
      var id = $(file.previewTemplate).find('.dz-remove').attr('id');
      file.previewElement.remove();

      $.ajax({
        type: 'DELETE',
        url: '/uploads/' + id,
        success: function(data){
          console.log(data.message);
        }
      });

      var order = $('.dropzone').sortable('serialize');
      $.ajax({
        type: 'POST',
        url: '/uploads/sort',
        data: order,
        success: function(data){
          console.log(data);
        }
      });
    }
  });

 //this function is for sorting + updating positions of old images loaded by the init function.
  $(function() {
    $(".dropzone").sortable({
      items:'.dz-preview',
      cursor: 'move',
      opacity: 0.5,
      containment: '.dropzone',
      distance: 20,
      update: function(event, ui) {
        var order = $('.dropzone').sortable('serialize');
        $.ajax({
          type: 'POST',
          url: '/uploads/sort',
          data: order,
          success: function(data){
            console.log(data);
          }
        });
      }
    });
    $(".dropzone").disableSelection();
  });
});