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:

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

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

• javascript
• drag-and-drop
• interact.js

• 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. – shadyhill Commented Sep 29, 2017 at 3:48

2 Answers 2

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

I think this is a better solution than the one that is posted most often, considering you are on a mobile device where user naturally scrolls down with other touch action besides the dragged elemements

.container{
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}
.container > *{
    -ms-touch-action: none;
    touch-action: none;
}