interact.jsのドラッグがChromeのモバイルエミュレータで動作しない

Question

私はinteract.jsを使用してスロー可能な要素を作成しています。

私は簡単な例を実行しようとしていますが、Webモードで正常に動作しますが、モバイルデバイスをエミュレートするとドラッグが正しく動作しません（要素はほとんど動きません）。ここで

はビンです：https://jsbin.com/gabagojuji/1/edit?output

だけでウェブやモバイルモードでそれを実行し、違いを参照してください。

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