interact.js drag not working on chrome mobile emulator

Question

I'm using interact.js to create a throwable element.

I'm trying to run a simple example and it runs fine in web mode, but when i emulate a mobile device the drag is not working properly (the element barely moves).

Here is a bin: https://jsbin.com/gabagojuji/1/edit?output

just run it in web and mobile mode and see the difference.

// target elements with the "draggable" class
interact('.draggable')
    .draggable({
        // enable inertial throwing
        inertia: true,
        maxPerElement: '>=2',
        // keep the element within the area of it's parent
        restrict: {
            restriction: ".wrapper",
            endOnly: false,
            elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
        },
        // enable autoScroll
        autoScroll: true,

        // call this function on every dragmove event
        onmove: dragMoveListener,
        // call this function on every dragend event
        onend: function(event) {
            var textEl = event.target.querySelector('p');

            textEl && (textEl.textContent =
                'moved a distance of ' +
                (Math.sqrt(event.dx * event.dx +
                    event.dy * event.dy) | 0) + 'px');
        }
    });

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

Kyanite

Did you ever figure this out? I'm having the same problem – when running the mobile emulator in chrome the onend event is fired during drag, ending the drag prematurely. Doesn't happen in the interactjs example, but does in my local react app. Using ineractjs 1.2.9 via npm install btw. – Cyclopean

Answer 1

I've had the same issue for a while and finally found a solution. You actually have to use this on the draggable container:

.dragging-container,
.dragging-container * {
  -ms-touch-action: none;
  touch-action: none;
}

Milfordmilhaud

I had to use version number 1.2.6 aswell (npm install [email protected]). Without that it did not work for me. Thanks @Milfordmilhaud – Limburg

@Milfordmilhaud Thank you. it worked for me, but i put this css on the draggable element – Heterotrophic

Placing this CSS on the draggable element fixed a bug where the draggable element required two clicks to drag it for a drag and drop inside a modal when using Chrome's mobile sim. Thanks! – Newmodel