可单独排序 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. For a better experience of the problem I would suggest to view the result pane individually.

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

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

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

编辑：，但如果可能的话，我仍然希望看到 "cleaner" 解决方案。

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 回调。

可单独排序 CSS3 缩放的连接容器无法正常移动到以下容器

Sortable with individually CSS3 scaled connected containers not working properly for moving to following containers

css

jquery

jquery-ui

jquery-ui-sortable