Interact JS draggable not working

Question

I am attempting to use interact.js for it's draggable/droppable functionality in a web project. However, using the most simple example I can think of, I can't seem to get draggable to do anything. It is very strange because I can get this to work:

interact(target).draggable({ 
    onmove: function(){ console.log('move') } 
})

Even though I get the console.log the target does not move at all. View my example at codepen here: https://codepen.io/vickera/pen/KvRMMg

Answer 1

You have to update the position of the element like this:

interact(target).draggable({onmove: dragMoveListener})
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);
}