interact.js Drag funktioniert nicht auf Chrome Mobile Emulator

Question

Ich benutze interact.js, um ein Wurf-Element zu erstellen.

Ich versuche, ein einfaches Beispiel auszuführen, und es läuft gut im Webmodus, aber wenn ich ein mobiles Gerät emulieren, funktioniert der Ziehvorgang nicht richtig (das Element bewegt sich kaum). Hier

ist ein Behälter: https://jsbin.com/gabagojuji/1/edit?output

nur führen Sie es in Web- und Mobile-Modus und den Unterschied sehen.

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

Ich hatte das gleiche Problem für eine Weile und endlich eine Lösung gefunden. Sie haben tatsächlich diese auf dem ziehbar Behälter verwenden:

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