jQuery UI add droppable event listener while hovering

I want to add droppable event listener while dragging one object and hovering droppable object.

Here is my code:

$('.will-be-drag').draggable({
    helper: 'clone',
    drag: function (event, ui) {
        $('.will-be-drop').hover(function () {
            $(this).droppable({
                drop: function (event, ui) {
                    let item = ui.draggable;
                    console.log(item[0])
                    item.detach().appendTo($(this));
                }
            });
        }, function () {
            $(this).droppable('disable');
        });

    }
});

And my HTML is like that:

<div class="will-be-drag"></div>
<div class="will-be-drag"></div>
<div class="will-be-drag"></div>

<?php
for($i = 0; $i <= 3000; $i++){
?>
    <div class="will-be-drop"></div>
<?php
}
?>

I'm doing that because of performance issues. I have 3k droppable object and it's freezing while dragging. It must add droppable eventlistener with only dragging $('.will-be-drag') object and hovering $('.will-be-drop').

With this code It only adds while hover not while dragging.

How can I do it?

I want javascript to breathe, it's being late when setting 3k droppable objects. There are only 30-40 draggable element. It's a table.