How to make jquery draggable and droppable to drag div blocks to other table td cells?

Question

JavaScript

Hi, I'm trying to set up dragging a div block into any td cell of a table

. There is a table with many td cells, some of them have div blocks, as a result, these divs can be transferred to empty td cells

. here is my code, but for some reason the droppable does not work does not accept a div and after removing the cursor from the dragged element, it returns to its place

$(function() {
  
        $(".div_in_td").draggable();

        $(".td_block").droppable({
                hoverClass: "hover_droppable", 
        });
  
    });

I tried to put empty divs in td_block so that they could accept draggable, I thought it was because of td, but it's still the same.
Who knows what's the problem?

Answer 1

https://jsfiddle.net/eq956pyb/1/