Interact.js: Make a div resizable AND draggable.

[rbozan]

Is this possible, because I can't seem to achieve this.

[taye]

As I said earlier today on Gitter, yes, it is possible. It would be helpful if you provided a concise working demo that shows _how_ you are trying to achieve this.

[taye]

The resizing demo on http://interactjs.io#resizing shows resizing and dragging:

  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,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }

interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener
  })
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true }
  })
  .on('resizemove', function (event) {
    var target = event.target;
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);

    // update the element's style
    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    target.textContent = event.rect.width + '×' + event.rect.height;
  });

[francescoagati]

Hi,
i notice that when interact.js is used with draggable and resizable drag events aren't fired.
if i use .on('dragmove resizemove') only resizemove is fired but not dragmove.

[taye]

The following works fine for the resizing demo on the project homepage:

interact('.resize-drag').on('dragmove resizemove', function (e) {
  console.log(e.type);
})

Drag happens when the pointer is in the middle of the element and resize at the edges.

[francescoagati]

I think that in my case the resize zone is over the drag zone.

[taye]

I've added a resize margin option so you have some more control over how close to the edges the pointer must be for a resize to happen. That might help.

interact(target).resizable({ margin: 10 });

[francescoagati]

thanks. i'm try it now

[DRSDavidSoft]

@taye Exactly what I was looking for. Thanks.

[taye]

@DRSDavidSoft You're welcome!