JSFiddle - React, Tailwind, and code Playground

HTML

<div id="list">
    <ul>
        <li id="drag" class="test">test1</li>
        <li id="drag" class="test">test2</li>
        <li id="drag" class="test">test3</li>
        <li id="drag" class="test">test4</li>
    </ul>
 
</div>
<div id="div1"></div>

CSS

ul{
    width: 200px;
    height: 200px;
    float: left;
}
li{
    border: 1px solid black;
}
#div1{
    width: 200px;
    height: 200px;
    background-color: #FF0000;
    margin-top: 50px;
}
#list{
    width: 400px;
    height: 200px;
}

JavaScript

$(function() {
    var limit = 1;
    var counter_test = 0;
    var counter_foo = 0;
    
    $("[id=drag]").draggable({
        revert: "invalid"
    });
    
    $('#div1').droppable({
        accept: function(item) {
            if ($(item).hasClass('test')) {
                if (counter_test >= limit) {
                    return false;
                    alert("hata");
                    }
            }
            else {
                if (counter_foo >= limit) {
                    return false;
                }
            }
            return true;
        },
        drop: function(e, ui) {
            if (ui.draggable.hasClass('test')) {
                counter_test++;
            }
            else {
                counter_foo++;
            }
        }
    });
});