网格中的可排序 jquery 矩形（相对维度）

Question

您好，我有一个矩形要在网格内移动。矩形是网格单元的倍数。所以 width=100% 和 height=100% 是 1 个单元格，而 width=200% 和 height=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 },
    });
}

Answer 1

我找到了解决方案。在 sortable 中添加以下选项：

tolerance:'pointer'

网格中的可排序 jquery 矩形（相对维度）

Sortable jquery rectangle in grid (relative dimensions)

javascript

jquery

jquery-ui

jquery-ui-sortable