网格中的可查询jquery矩形（相对尺寸）

Question

你好，我有一个要在网格内移动的矩形。矩形是网格单元的倍数。因此，宽度= 100％和高度= 100％是1个单元格，而宽度= 200％和高度= 200％是4个单元格。]

现在，我使用jquery-ui-sortable创建了一个代码，但是它不适用于所有维度。例如，width = 100％和height = 300％可以正常工作，但是相反的width = 300％和height = 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 },
    });
}

你好，我有一个要在网格内移动的矩形。矩形是网格单元的倍数。因此width = 100％和height = 100％是1个单元格，而width = 200％和height = 200％是4个单元格。现在我...

Answer 1

我找到了解决方案。要以可排序方式添加以下选项：