JSFiddle - React, Tailwind, and code Playground

Dropzone

by web-nfo.com

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css">
<form action="https://www.247web.nl/tmp/post.php" class="dropzone" id="my-dropzone"></form>

JavaScript

$(document).ready(function(){
    var myDropzoneInstance = Dropzone.forElement("#my-dropzone")
    myDropzoneInstance.on("addedfile", function(file) {
        console.log(file);
        $(this).attr('data-position', 'test');
    });
    myDropzoneInstance.on("success", function (rep) {
        console.log(rep);
        console.log(rep.UniqueId);
    }).on("error", function(rep) { 
        console.log('error:' + rep.UniqueId);
    }).on("sending", function(file) {
        //formData.append("filesize", file.size);
    });
    
    
    $('.dropzone').sortable({
    items:'.dz-preview',
    cursor: 'move',
    opacity: 0.5,
    containment: "parent",
    distance: 20,
    tolerance: 'pointer',
    update: function(e, ui){
        // do what you want
    }
    });
});