Way to do drag-and-drop re-ordering of the preview elements in a dropzone.js instance

drag and dropdropzone.jspreview

I have a dropzone.js instance on a web page with the following options:

autoProcessQueue:false
uploadMultiple:true
parallelUploads:20
maxFiles:20

It is programmatically instantiated, as it is part of a larger form. I have it rigged up to process the queue when the form is submitted.

The goal is for my users to be able to use the dropzone to manage images for an item, so I'd like them to be able to re-order the images by dragging and dropping the dropzone.js image previews. Is there a good way to do this? I've tried using jquery-ui's sortable but it doesn't seem to play nice with dropzone.js.

Best Answer

I've got it working now using jquery-ui's sortable. The trick was to make sure to use the 'items' option in sortable to pick only the dz-preview elements, because dropzone.js has the dz-message element along with the dz-preview elements in the main container. Here's how my code looks:

The HTML:

<div id="image-dropzone" class="dropzone square">

The script:

$(function() {
    $("#image-dropzone").sortable({
        items:'.dz-preview',
        cursor: 'move',
        opacity: 0.5,
        containment: '#image-dropzone',
        distance: 20,
        tolerance: 'pointer'
    });
})

Related Solutions

C# – How to drag and drop files into an application

Some sample code:

  public partial class Form1 : Form {
    public Form1() {
      InitializeComponent();
      this.AllowDrop = true;
      this.DragEnter += new DragEventHandler(Form1_DragEnter);
      this.DragDrop += new DragEventHandler(Form1_DragDrop);
    }

    void Form1_DragEnter(object sender, DragEventArgs e) {
      if (e.Data.GetDataPresent(DataFormats.FileDrop)) e.Effect = DragDropEffects.Copy;
    }

    void Form1_DragDrop(object sender, DragEventArgs e) {
      string[] files = (string[])e.Data.GetData(DataFormats.FileDrop);
      foreach (string file in files) Console.WriteLine(file);
    }
  }

Javascript – Integrating Dropzone.js into existing HTML form with other fields

Here's another way to do it: add a div in your form with a classname dropzone, and implement dropzone programmatically.

HTML :

<div id="dZUpload" class="dropzone">
      <div class="dz-default dz-message"></div>
</div>

JQuery:

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    $("#dZUpload").dropzone({
        url: "hn_SimpeFileUploader.ashx",
        addRemoveLinks: true,
        success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add("dz-success");
            console.log("Successfully uploaded :" + imgName);
        },
        error: function (file, response) {
            file.previewElement.classList.add("dz-error");
        }
    });
});

Note : Disabling autoDiscover, otherwise Dropzone will try to attach twice

Best Answer

Related Solutions

C# – How to drag and drop files into an application

Javascript – Integrating Dropzone.js into existing HTML form with other fields

Related Topic