JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" style="z-index:5;">
    <p>Draggable div with list <br />
        z-index: 5</p>
    <ul id="k1">
        <li>One</li>
        <li>two</li>
        <li>three</li>
    </ul>
    
</div>

<div id="droparea">Drop area with z-index: 1</div>

CSS

body {
    font-size: 12px;
}

li {
    border:1px solid #444444;
    background-color:#AAAAAA;
    padding:10px;
    margin:10px;
}

#droparea {
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    background-color:#cccccc; 
    z-index:1;
}

#k1 {
    width:200px; 
    height:200px; 
    background-color:#ffffff; 
    margin:20px; 
    padding:10px; 
    border:1px solid #000000;
}

#div1 {
    border: 1px solid #fff;
    width: 260px;
    padding: 10px;
}

JavaScript

$(document).ready(function() {
    $("#div1").draggable();
    $("#k1").sortable({
        revert: '100',
    }).droppable({ greedy: true});
    
    $('#droparea').droppable({
        accept: 'li',
        drop: function(event, ui) {
            console.log('Dropped');
        }
    });
    
});