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

Снова всем привет. Возникла проблема с jQuery UI при перемещение элемента в тег, он принимает и фиксируте только ОДИН элемент, когда мне нужно несколько. (я решил избавиться от канваса и сделал элементы обычными дивами). Напомню, что данная фича работает следующим образом http://jqueryui.com/droppable/#revert.

Игровое поле сделано через таблицу.

Вот код программы:

<div id="ships_collection" class="ships-collection" data-hidden="true">
	<div class="ship ship111"></div>
	<div class="ship ship112"></div>
	<div class="ship ship113"></div>
	<div class="ship ship114"></div>
</div>

//Перемещение кораблей
  $( function() {
    $( ".ship" ).draggable({ revert: "invalid" });
 
    $( "td" ).droppable({
      classes: {
        "ui-droppable-active": "ui-state-active",
        "ui-droppable-hover": "ui-state-hover"
      },
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          $("td").not(this).droppable("disable");
      }
    });
  });

Как сделать чтобы в ячейки таблицы можно было переносить и фиксировать несколько элементов?

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> td, div.ship{ box-sizing: border-box; width: 40px; height: 40px; border: 1px solid #000000; text-align: center; background-color: rgba(30, 144, 255, 1); margin: 0; padding: 0; } div.ship { background-color: rgba(105, 105, 105, 1); display: inline-block; margin-right: 2px; } td div.ship { display: block; margin: 0; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script> $(function() { var mytable = $('<table/>').appendTo('body'), tr, td = $.map(Array(100),function(el,i) { i % 10 || (tr = $('<tr/>').appendTo(mytable)); return $('<td/>').appendTo(tr); }), ship = $.map(Array(10),function(i) { return $('<div class="ship"/>').appendTo('body'); }); $(td).droppable({ accept: ".ship", drop: function(event, ui) { ui.draggable.appendTo(this) } }); $(ship).draggable({ cancel: "a.ui-icon", revert: "invalid", containment: "document", helper: "clone", cursor: "move" }); }); </script> </head> <body> </body> </html>