Resize example

[dhqvinh]

I'm working a dashboard that needs drag & drop widgets, resizeable. Interact.js seems to be good to our need, but I cannot find an example of how to implement resizable, can you help?

Thanks.

[taye]

Here's a quick example: http://codepen.io/taye/pen/xIkdz. I'll also put one on interactjs.io soon.

interact('.resize')
  .resizeable(true)
  .on('resizemove', function (event) {
    var target = event.target;

    // add the change in coords to the previous width of the target element
    var
      newWidth  = parseFloat(target.style.width ) + event.dx,
      newHeight = parseFloat(target.style.height) + event.dy;

    // update the element's style
    target.style.width  = newWidth + 'px';
    target.style.height = newHeight + 'px';

    target.textContent = newWidth + '×' + newHeight;
  });