0

I recently started a bounty for this question in hopes of resolving similar issues I had with jQuery UI sortables and CSS3 scaled containers. However, my case is more complex.

Furthermore, only later on did I realize I needed to disallow overflowing of the containers' contents. Therefor I had to set overflow: hidden on them and have the ui.helper be cloned and appended to document.body. Luckily, that actually seemed to simplify adjusting the ui.helper, in that I only needed to copy transform and transform-origin to play nice with its positioning.

However, after fiddling around with the other suggested idea, given in the selected answer, about adjusting the item dimensions, I still can't seem to make my case work.

Please see my case in a fiddle. For a better experience of the problem I would suggest to view the result pane individually.

The problem is that when I try to move an item to a container following its current container, jQuery UI has problems detecting the intersection. This appears to have something to do with the perceived width of either the item itself or the ui.helper, since moving to preceding containers seem to work fine. However, I'm just not sure where to look.

And even though I suspect refreshPositions() is relevant to my problem — which is basically what I'm trying to accomplish in fixStart(), but for all containers — it doesn't appear to do a whole lot.

My question, therefor, is: what is it that actually needs to be adjusted for jQuery UI to properly detect intersections, in this case?

Edit: I've managed to solve it, but I'd still love to see a "cleaner" solution, if possible.

Decent Dabbler
  • 22,532
  • 8
  • 74
  • 106

1 Answers1

0

I think I've managed to figure out how to get it to work, myself.

The problem actually has to do with the calculated container widths. These are cached inside refreshPositions(), but since those are the ones that actually have the CSS3 transform applied to them, the cached values are not calculated (to scale) properly.

Luckily, I came across an undocumented option: custom.refreshContainers, which is a callback that, when defined, will be called from within refreshPositions(), allowing you to substitute the containerCache calculations.

So, I amended my code with the following:

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
  }
} );

You can see it in action in the adjusted fiddle.

So far, this seems to works beautifully, but I'd still like to know if there's a solution possible that doesn't utilize the undocumented custom.refreshContainers callback.

Decent Dabbler
  • 22,532
  • 8
  • 74
  • 106