Javascript-форум - Фиксирование элемента в теге

Всем привет. Мне нужно сделать перетягивание элемента в тег td и чтобы он там зафиксировался. Я нашёл нужную мне функцию в jQuery UI https://jqueryui.com/droppable/#revert . И я не могу реализовать фиксирование элемента в ячейке. (Квадратик сделан на канвасе). На данный момент я перетягиваю элемен в ячейку и она загорается жёлтым, а элемент уходит обратно.

Игровое поле создаётся через js

<div id="ships_collection" class="ships-collection" data-hidden="true">
<canvas id="ship1" class="ui-widget-content"></canvas>
</div>

$( function() {
    $( "#ship1" ).draggable({ revert: "valid" });
 
    $( "td" ).droppable({
      classes: {
        "ui-droppable-active": "ui-state-active",
        "ui-droppable-hover": "ui-state-hover"
      },
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
      }
    });
  } );