JSでタップすると近くでタッチドラッグ＆ドロップ配置

Question

私のページにいくつかの要素をドラッグアンドドロップする機能を作りたいと思います。以下のコードを使用すると、要素はタッチで移動しますが、タップした部分（要素の中央または左下に表示されます）の近くにはありませんが、指の右下に移動します。私が欲しいのは、私がタップしたポイントでドラッグする要素を移動できることです。

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

私はまた、左右の位置を計算するために別のものにしようとしたが、それは失敗し、例えば：

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

は、どのようにそれが正しい動作を実現することは可能でしょうか？

Answer 1

要素のアンカーポイントが左上隅にあるために発生します。

は、あなたのtouchMove機能でこれを試してみてください：ここで

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

はworking fiddleです。開発者ツールのデバイスモードを使用してクロムでテストすることができます。

PS。 z-indexを再初期化するためのtouchendイベントが必要です（まだ実行していない場合）。

編集

ので、touchstartイベントでは、あなたは（ユーザーが要素に触れた）要素のアンカーを保存する必要があります。

これを行うには、getBoundingClientRect()の機能を使用できます。それは彼らが指定することはできませんので、スタイル、左/トップの属性に依存するよりはましだ：

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

そして、あなたは私が思った通りの代わりに要素の中心（の左/トップ計算するために、このanchorを使用します最初）。ここで

がupdated fiddle