网格中的可排序 jquery 矩形（相对尺寸）

Posted 2023-05-08

【中文标题】网格中的可排序 jquery 矩形（相对尺寸）

【英文标题】：Sortable jquery rectangle in grid (relative dimensions)

【发布时间】：2020-07-16 14:47:24

【问题描述】：

您好，我有一个矩形，我想在网格内移动。矩形是网格单元的倍数。所以 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 ,
    );

【参考方案1】：

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

tolerance:'pointer'