jquery - 可使用单独的 CSS3 缩放的连接容器进行排序，无法正常工作以移动到以下容器

Question

我最近开始悬赏 this question希望解决我在 jQuery UI sortables 和 CSS3 缩放容器方面遇到的类似问题。但是，我的情况更复杂。

此外，直到后来我才意识到我需要禁止容器内容物溢出。因此，我必须在它们上设置 overflow: hidden 并将 ui.helper 克隆并附加到 document.body。幸运的是，这实际上似乎简化了 ui.helper 的调整，因为我只需要复制 transform 和 transform-origin 即可使用它的定位。

然而，在摆弄了另一个建议的想法之后，given in the selected answer ，关于调整 item 尺寸，我似乎仍然无法使我的案例工作。

请see my case in a fiddle .为了更好地体验这个问题，我建议 view the result pane individually .

问题是，当我尝试将元素移动到其当前容器之后的容器时，jQuery UI 在检测交叉点时出现问题。这似乎与元素本身或 ui.helper 的感知宽度有关，因为移动到前面的容器似乎工作正常。但是，我只是不确定去哪里找。

即使我怀疑 refreshPositions()与我的问题相关 — 这基本上是我在 fixStart() 中尝试完成的，但是对于所有容器 — 它似乎并没有做很多事情.

因此，我的问题是:在这种情况下，jQuery UI 实际需要调整什么才能正确检测交叉点？

---

编辑:I've managed to solve it ，但如果可能的话，我仍然希望看到一个“更干净”的解决方案。

Answer 1

我想我自己已经设法弄清楚如何让它发挥作用。

问题实际上与计算的容器宽度有关。它们缓存在 refreshPositions() 中，但由于 那些 实际上应用了 CSS3 transform，缓存的值不是正确计算(按比例)。

幸运的是，我遇到了一个未记录的选项:custom.refreshContainers ，这是一个回调，定义后将从 refreshPositions() 中调用，允许您替换 containerCache 计算。

所以，我修改了我的代码如下:

function fixRefreshContainers() {
  this.containers.forEach( function( container ) {
    var scale = getScale( container.element );
    var offset = container.element.offset();
    container.containerCache.left   = offset.left;
    container.containerCache.top    = offset.top;
    container.containerCache.width  = container.element.width()  * scale.x;
    container.containerCache.height = container.element.height() * scale.y;
  } );
}

$( 'div.chapter' ).sortable( {
  /* omitted earlier options, for brevity */
  custom: {
    refreshContainers: fixRefreshContainers
  }
} );

您可以 see it in action in the adjusted fiddle .

到目前为止，这似乎工作得很好，但我仍然想知道是否有可能的解决方案不使用未记录的 custom.refreshContainers 回调。