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，因此缓存的值不会正确计算（缩放）。 / p>

幸运的是，我遇到了一个未记录的选项：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缩放连接容器进行排序，无法正常移动到以下容器

1 个答案: