Interact.js: Drag/Resize on a scaled div

[freefalling]

I've a div that acts as a container of all interactables (another divs) that is scaled down or up using CSS property transform scale. There's no problem when scale factor is at 1 but whenever it change, suddenly all dragging and resizing functionalities become buggy. I mean it doesn't seem to follow properly the mouse movement and drag or resize accordingly.

Is there a setting or at least some clues on how to build a workaround to this issue?

[dpekkle]

I think you may need to change your movement listeners:
e.g.

 function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx / scale_x,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy / scale_y;
    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }

Havent been able to test it.

[freefalling]

You are the man dpekkle!! That gem worked flawlessly.

[dpekkle]

I decided to implement this in my program, as I was searching for a similar solution for a while (great idea on using transform scale!). So here's some notes on implementing for resize in case anyone comes up against the problem of using a responsive container with interact.

function resizeMoveListener(event)
{
    //get scale of drop container
    //see http://stackoverflow.com/questions/5603615/get-the-scale-value-of-an-element
    var container = $('#pagecontainers')[0];
    var scaleX = container.getBoundingClientRect().width / container.offsetWidth;
    var scaleY = container.getBoundingClientRect().height / container.offsetHeight;

    //apply transform
    var target = event.target;
    var x = event.rect.width/scaleX;
    var y = event.rect.height/scaleY;

    //get data-x offsets of container
    offset_left = target.getAttribute('data-x');
    offset_top  = target.getAttribute('data-y');

    x = checkBounds(offset_left, x, $('#pagecontainers').width())
    y = checkBounds(offset_top, y, $('#pagecontainers').height())

    target.style.width  = x + 'px';
    target.style.height = y + 'px';
}

function checkBounds(offset, dimension, limit)
{
    offset = (parseFloat(offset) || 0);
    if (offset + dimension > limit)
    {
        //larger than container
        dimension = limit - offset
    }
    return dimension;
}