Drag & Drop Case Attachments – JavaScript for Dragover, Dragleave, Drop

$(document).ready(function() {
    
    // Initialise a variable that references the "drop-zone" container defined in the HTML
    var dropZone = $('#drop-zone');

    // Add a dragover event listener to the dropZone
    dropZone.on('dragover', function() {
        // Add a class of 'dragover'. We'll use this to provide visual feedback
        $(this).addClass('dragover');
        return false;
    });

    // Add a dragleave event listener to the dropZone
    dropZone.on('dragleave', function() {
        // Remove the'dragover' class. We'll use this to provide visual feedback
        $(this).removeClass('dragover');
        return false;
    });

    // Add a drop event listener to the dropZone. This is our key event
    dropZone.on('drop', function(e) {
        // Prevent the default behavior of opening the file in the browser
        e.preventDefault();
        // Remove the'dragover' class. We'll use this to provide visual feedback
        $(this).removeClass('dragover');
    });
});