javascript - interact.js 拖动不适用于 chrome 移动模拟器

Question

我正在使用 interact.js创建一个可抛出的元素。

我正在尝试运行一个简单的示例，它在网络模式下运行良好，但是当我模拟移动设备时，拖动无法正常工作(元素几乎没有移动)。

这是一个容器:https://jsbin.com/gabagojuji/1/edit?output

只需在 Web 和移动模式下运行它，看看差异。

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

Answer 1

我遇到同样的问题已经有一段时间了，终于找到了解决办法。您实际上必须在可拖动容器上使用它:

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