Updated 02.12.2021

If you want to enable drag-and-drop of attachments in your DFFS enabled SharePoint form you can use the code below.

Add this to your Custom CSS

#idAttachmentsRow .ms-formbody {
    border: 2px dashed #cccccc;
}

.dragOverInput {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 100;
}

.attPartHidden {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
}

#dropOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    background-color: #000000;
    pointer-events: none;
    z-index: 101;
}

#dropOverlayTextWrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #ffffff;
    font-size: 1.5em;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 102;
}

And add this to your Custom JS

(function() {
    // Does not work in Internet Explorer
    if (!isOldIE()) {
        var isDragging = false;
        jQuery("body").append("<div id='dropOverlayTextWrap'><div id='dropOverlayText'></div></div><div id='dropOverlay'></div>");
        var text = {
            "drop": "Drop here...",
            "hoverDropareaTitle": "You can drop files one by one here.",
            "dropped": "Adding file...",
            "multiple": "You can only drop one file at the time!",
            "duplicateAlertHeader": "Duplicate file name",
            "duplicateAlertBody": "A file with the name already exists."
        };
        jQuery("#idAttachmentsRow .ms-formbody").attr("title", text.hoverDropareaTitle);
        jQuery("#idAttachmentsRow").on("dragover", function(ev) {
            if(jQuery("#idAttachmentsRow").hasClass("dffs-readonly")){
                return;
            }
            ev.preventDefault();
            ev.stopPropagation();
            if (!isDragging) {
                isDragging = true;
                jQuery("#dropOverlay").show();
                jQuery("#dropOverlayText").text(text.drop);
                jQuery("#dropOverlayTextWrap").css("display", "flex");
                var fileInput = jQuery("#partAttachment").find("input[type=file]:last");
                jQuery("#partAttachment").addClass("attPartHidden").show();
                fileInput.addClass("dragOverInput");
                if (fileInput.data("drop_event_on") === undefined) {
                    fileInput.data("drop_event_on", "1");
                    fileInput.on("dragenter", function(ev) {
                        ev.preventDefault();
                        ev.stopPropagation();
                        var files = ev.originalEvent.dataTransfer.items;
                        if (files.length > 1) {
                            jQuery("#dropOverlayText").text(text.multiple);
                        }
                    }).on("drop", function(ev) {
                        isDragging = false;
                        jQuery("#dropOverlayText").text(text.dropped);
                        var fileDone = setInterval(function() {
                            var fileInputVal = fileInput.val();
                            if (fileInputVal !== undefined && fileInputVal !== "") {
                                var currentAtt = getFieldValue("Attachments");
                                var currAttObj = {};
                                jQuery.each(currentAtt, function(i, a) {
                                    currAttObj[jQuery(a).text()] = true;
                                });
                                clearInterval(fileDone);
                                jQuery("#partAttachment").removeClass("attPartHidden").hide();
                                fileInput.removeClass("dragOverInput");
                                jQuery("#attachOKbutton").trigger("click");
                                jQuery("#dropOverlay").hide();
                                jQuery("#dropOverlayTextWrap").hide();
                                if (currAttObj[fileInputVal.split("\\").pop()] !== undefined) {
                                    jQuery("#dropOverlayText").text(text.duplicate);
                                    spjs.modal.add({
                                        "title": text.duplicateAlertHeader,
                                        "html": text.duplicateAlertBody,
                                        "showClose": false,
                                        "allowMaximize": false,
                                        "resizable": false,
                                        "ok": function() {
                                            // Remove last row
                                            var attIndex = jQuery("#idAttachmentsTable").find("tr:last").attr("id").split("").pop();
                                            RemoveLocal("attachRow" + attIndex, "fileupload" + attIndex);
                                        }
                                    });
                                }
                            }
                        }, 1000);
                    }).on("dragleave", function(ev) {
                        jQuery("#dropOverlay").hide();
                        jQuery("#dropOverlayTextWrap").hide();
                        isDragging = false;
                        jQuery("#partAttachment").removeClass("attPartHidden").hide();
                        fileInput.removeClass("dragOverInput");
                    });
                }
            }
        });
    }
})();

Now your Attachment field will show as a drop-area

When you drag a file over this drop-area and drop it it will be added as an attachment to the list item. It uses the default attachment functionality and you must save your form to add the attachment just as you normally would do.

Let me know in the comments or in the forum how this works out.

Best regards,
Alexander