JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Drag/drop</title>            
    </head>
    <body>
        <article class="album" data-album="1">
            <h1>Album #1</h1>
            <p>Drop files to add</p>
        </article>
        <article class="album" data-album="2">
            <h1>Album #2</h1>
            <p>Drop files to add</p>
        </article>
    </body>
</html>

CSS

.album { margin: 10px; padding: 10px; background-color: #f90; }

JavaScript

$( document )
    .on( 'dragover', handleDrag )
    .on( 'drop', handleDrop );

function handleDrag( e ){
    e.stopPropagation();
    e.preventDefault();
}

function handleDrop( e ){
    e.stopPropagation();
    e.preventDefault();

    var $droppedHere = $( e.target ).closest( '.album' );
    var albumId = $droppedHere.data( 'album' );
    if( albumId == undefined ){
        alert( 'Create a new album' );
    } else {
        alert( 'Add files to album ' + albumId );
    }
}