Сортируемый jquery прямоугольник в сетке (относительные размеры)

Question

Здравствуйте, у меня есть прямоугольник, который я хочу переместить в сетке. Прямоугольник кратен ячейкам сетки. Поэтому width = 100% и height = 100% - это 1 ячейка, тогда как width = 200% и height = 200% - это 4 ячейки.

Теперь я создал код с jquery -ui-sortable, но это не работает для всех размеров. Например, ширина = 100% и высота = 300% работают нормально, но противоположная ширина = 300% и высота = 100% перемещают прямоугольник в неправильном положении по отношению к указателю мыши во время события удаления.

Кто-то может объяснить мне, как решить эту проблему и почему объект не помещается туда, куда упал?

Codepen

<div class="container">
   <div class="divTable">
    <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell"><div class="rectangle"></div></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
      <div class="divTableCell"></div>
    </div>
    </div>
</div>

</div>
.container {
    margin-left: auto; 
    margin-right: auto; 
    text-align: left; 
    width: 50%; 
    padding:0;
    border: 1px solid red; 
}
.divTable{
    display: table;
    width: 100%;
}
.divTableRow {
    display: table-row;
}
.divTableCell {
    border: 1px solid blue;
    display: table-cell;
  width: 12.5%;
  padding-bottom:12.5%;
  position: relative;
}
.rectangle{
  position: absolute;
  z-index: 100;
  width: 300%;
  height: 100%;
  background-image: url('https://sinclairorthodontics.co.uk/wp-content/uploads/2013/11/Placeholder-2400px-1024x1024.png');
  background-size: 100% 100%;
} 


refreshTable();
function refreshTable()
{
    $('.divTableCell').sortable({
        connectWith: '.divTableCell',
        cursorAt: { top:30, left: 30 },
    });
}

Answer 1

Я нашел решение. Чтобы добавить следующую опцию в сортируемую:

tolerance:'pointer'