Touch-Drag-and-Drop-Positionierung in der Nähe von tap mit JS

Question

Ich möchte Funktion zum Ziehen und Ablegen von Elementen auf meiner Seite machen. Wenn ich den Code unten verwende, bewegt sich das Element durch Berührung, aber es bleibt nicht in der Nähe des Fingers, wo ich geklopft habe (zum Beispiel in der Mitte oder links/rechts unten am Element), aber es bewegt sich vom Finger nach rechts unten. Was ich will - ist in der Lage sein, das Element zu verschieben, indem ich es nach dem Punkt ziehe, an dem ich geklopft habe.

function touchStart(e) { 
    e.preventDefault(); 
    var whichArt = e.target; 
    resetZ(); 
    whichArt.style.zIndex = 10; 
} 

function touchMove(e) { 
    e.preventDefault(); 
    var dragElem = e.target; 
    var touch = e.touches[0]; 
    var positionX = touch.pageX; 
    var positionY = touch.pageY; 
    dragElem.style.left = positionX + 'px'; 
    dragElem.style.top = positionY + 'px'; 
} 

document.querySelector('body').addEventListener('touchstart', touchStart, false); 
document.querySelector('body').addEventListener('touchmove', touchMove, false); 

<!--elements I want to drag--> 
<img draggable="true" id="one" src="images/one.svg" style="position: absolute; left: 50px; top: 120px; z-index: 3;"> 
<img draggable="true" id="two" src="images/two.svg" style="position: absolute; left: 367px; top: 150px; z-index: 3;"> 

ich auch, um verschiedene Dinge versucht linke und rechte Position zu berechnen, aber es versäumt, zum Beispiel:

var moveOffsetX = dragElem.offsetLeft - touch.pageX; 
var moveOffsetY = dragElem.offsetTop - touch.pageY; 
var positionX = touch.pageX - moveOffsetX; /* + also tried*/ 
var positionY = touch.pageY - moveOffsetY; /* + also tried*/ 

Wie ist es möglich, das richtige Verhalten zu erreichen?

Answer 1

Es passiert, weil der Ankerpunkt des Elements in der oberen linken Ecke ist.

Versuchen Sie dies in Ihrer touchMove Funktion:

dragElem.style.left = positionX - dragElem.width/2 + 'px'; 
dragElem.style.top = positionY - dragElem.height/2 + 'px'; 

hier ein working fiddle ist. Sie können Chrome mit dem Gerätemodus in den Entwicklertools testen.

PS. Sie sollten ein touchend Ereignis haben, um das z-index neu zu initialisieren (wenn Sie das nicht bereits getan haben).

bearbeiten

Also, in der touchstart Fall müssen Sie den Anker des Elements speichern (wo der Benutzer das Element berührt).

Um dies zu tun, können Sie getBoundingClientRect() Funktion verwenden. Es ist besser, als auf der Art abhängen, oben/links Attribute, weil sie nicht angegeben werden können:

var elementRect = whichArt.getBoundingClientRect(); 
anchor = { 
    top: touch.pageY - elementRect.top, 
    left: touch.pageX - elementRect.left 
}; 

Und dann verwenden Sie diesen anchor oben/links anstelle der Mitte des Elements zu berechnen (wie ich dachte an zuerst).

Hier ist der updated fiddle