JQuery UI draggable 隣のtdにもドラッグできないようにしたい

緑に対して赤はぴったりハマるような仕掛けになっています。

赤い二つが重なってドラッグできない仕様にしたいです。

赤は緑の倍の大きさなので緑二つ分を占有していると思うのですが、この二つ占有している左側には現状でも重ならないようにできています。
しかし右側には重なってしまいます。

　下画像は NGの例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/stylesheet.css">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="./node_modules/jq.schedule/dist/css/style.css" />
  <script src="main.js"></script>
</head>
<body>
    
    <table>
        <tr>
            <th >11</th>
            <th >11</th>
            <th >11</th>
            <th >11</th>
            <th >11</th>
        </tr>
        <tr>
            <td class="table" id=1></td>
            <td class="table" id=2></td>
            <td class="table" id=3></td>
            <td class="table" id=4></td>
            <td class="table" id=5></td>
        </tr>
        <tr>
            <td class="table"></td>
            <td class="table"></td>
            <td class="table"></td>
            <td class="table"></td>
            <td class="table"></td>
        </tr>
    </table>
    <div class="draggable">
        <p>ドラッグ要素</p>
    </div>
    <div class="draggable">
        <p>ドラッグ要素</p>
    </div>
</body>
</html>

function modDroparea(){
  $('.table').each(function () {
    $(this).droppable({
      hoverClass: 'imgover',
      disabled: $(this).find('.draggable').length > 0
    });
  });
}
$(function(){
  $('.draggable').draggable({
    revert:'invalid',
    zIndex:'1000',
  });
  modDroparea();
  $('.table').droppable({
      drop: function(e, ui){
        ui.draggable.prependTo(this).css({top:'0',left:'0'});
        modDroparea();
      },
    });
});

.table{
  height: 200px;
  background-color: limegreen;
  width: 200px;
  max-width:200px;
  border: 5px solid blue;
}
.draggable{
  width: 395px;
  height: 195px;
  background-color: red;
  display: inline-block;
  position: relative;
  top: 0;
}

.imgover{
  background-Color:yellow;
}

どうぞよろしくお願いいたします。