Interact.js: dragMoveListener is not defined

[jbaartman]

Hello,

I am trying to implement the pinch zoom function on my images in my web app. I have referenced the interact.js file and then followed your example:
var scale = 1,
gestureArea = document.querySelector('.gesture-area'),
scaleElement = document.querySelector('.scale-element'),
resetTimeout;

`interact(gestureArea)`
  .gesturable({
    onstart: function (event) {
      clearTimeout(resetTimeout);
      scaleElement.classList.remove('reset');
    },
    onmove: function (event) {
      scale = scale * (1 + event.ds);

      scaleElement.style.webkitTransform =
      scaleElement.style.transform =
        'scale(' + scale + ')';

      dragMoveListener(event);
    },
    onend: function (event) {
      resetTimeout = setTimeout(reset, 1000);
      scaleElement.classList.add('reset');
    }
  })
  .draggable({ onmove: dragMoveListener });

function reset () {
  scale = 1;
  scaleElement.style.webkitTransform =
  scaleElement.style.transform =
    'scale(1)';
}

But I get the error at dragMoveListener is not defined. Can you please help? Thans

[ghost]

You need to define the dragMoveListener function yourself, here's the default code:

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

[shoolpani]

Worked for me

[apanasara]

worked for me

[ubershmekel]

This function being missing confused me for a bit. The resize snippet from the main page references it, but it isn't directly in the code sample :(

It was a bit hard to realize this from within a jsfiddle.

I did get it working in the end: http://jsfiddle.net/ubershmekel/sh7fqt0w/1/