Droppable

$.fn.droppable = function(func, options){

        if(typeof this != "undefined"){

            if(typeof $.fn.droppable.files == "undefined")
                $.fn.droppable.files = {};

            if(typeof $.fn.droppable.index == "undefined")
                $.fn.droppable.index = 0;

            var elem = this;

            // console.debug(options);
            var settings = $.extend({
                upload_on_drop: true,
                show_upload_button: false,
                form: elem.find("form").first(),
                url: "/upload.php",
                backgroundColor: "rgba(150,150,150,0.7)",
                elementsColor: "#FFF",
                selector: ".droppable",
                arrayName: "files",
                method: "POST",
                dataType: "json",
                customData:{},
                headers: {},
                onSuccess: function(){},
                onError: function(){},
                onStart: function(e, files, from){},
                onProgress: function(e, files, from){},
                onDownloadProgress: function(e, files, from){}
            }, options);

            if(func == null){

                if(typeof this.attr("data-droppable") == "undefined"){
                    this.attr("data-droppable", $.fn.droppable.index);
                    $.fn.droppable.files[this.attr("data-droppable")] = [];
                    $.fn.droppable.index+=1;

                    this.on("dragover", function(e){

                        e.preventDefault();
                        e.stopPropagation();

                        var dt = e.originalEvent.dataTransfer;
                        e.originalEvent.dataTransfer.dropEffect = 'copy';
                        if (dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))) {

                            elem.css("background-color", settings.backgroundColor);
                            elem.find("*").css("color", settings.elementsColor);
                        }
                    });

                    this.on("dragleave", function(e){

                        var dt = e.originalEvent.dataTransfer;
                        e.preventDefault();
                        e.stopPropagation();
                        elem.css("background-color", "");
                        elem.find("*").css("color", "");

                    });

                    this.on("dragend", function(e){

                        var dt = e.originalEvent.dataTransfer;
                        e.preventDefault();
                        e.stopPropagation();
                        elem.css("background-color", "");
                        elem.find("*").css("color", "");

                    });

                    this.on("drop", function(e){

                        var dt = e.originalEvent.dataTransfer;

                        e.preventDefault();
                        e.stopPropagation();
                        elem.css("background-color", "");
                        elem.find("*").css("color", "");

                        if (dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))) {

                            for(f in dt.files){

                                if(typeof dt.files[f] == "object" && dt.files[f] instanceof File)
                                    $.fn.droppable.files[elem.attr("data-droppable")].push(dt.files[f]);
                            }
                        }

                        if(settings.upload_on_drop === true && $.fn.droppable.files[elem.attr("data-droppable")].length > 0){

                            elem.droppable("upload", settings);
                        }
                    });

                    // console.debug($(settings.form));
                    if($(settings.form).length > 0){

                        $(settings.form).find("input[type='file']").on("change", function(e){

                            if($(this).val() != ""){

                                var fil= $(this)[0].files;

                                for(f in fil)
                                    $.fn.droppable.files[elem.attr("data-droppable")].push(fil[f]);

                                if(settings.upload_on_drop == true){

                                    elem.droppable("upload", settings);
                                }

                            }
                        });
                    }
                }
            }

            if(func == "upload"){


                var files = $.fn.droppable.files[this.attr("data-droppable")];
                var fData = new FormData();

                for(f in files){

                    if(typeof files[f] == "object" && files[f] instanceof File)
                        fData.append(settings.arrayName+"[]",files[f]);
                }

                for(s in settings.customData){
                    fData.append(s, settings.customData[s]);
                }



                ajaxCall(settings.form, fData, {
                    type: settings.method,
                    dataType: settings.dataType,
                    url: settings.url,
                    beforeSend: function(e) {
                        settings.onStart.bind(elem).call(elem, e, files, settings.form);
                    },
                    contentType: false,
                    processData: false,
                    xhr: function(e){
                        var xhr = $.ajaxSettings.xhr();

                        xhr.upload.onprogress = function(e) {
                            settings.onProgress.call(elem, e, files, settings.form);
                            // console.log(Math.floor(e.loaded / e.total *100) + '%');
                        };

                        xhr.onprogress = function(e){
                            settings.onDownloadProgress.call(elem, e, files, settings.from);
                        };

                        return xhr;
                    },
                    success:settings.onSuccess.bind(settings.form),
                    error:settings.onError.bind(settings.form)
                });

                $.fn.droppable.files[this.attr("data-droppable")] = [];

                return this;
            }

            return this;
        }

    };