Javascript 用JS触摸轻触附近的拖放定位

我想让函数在我的页面上拖放一些元素。当我使用下面的代码时，元素通过触摸移动，但它不会停留在我点击的手指附近（例如，元素中心或左/右底部的expample），而是从手指移动到右底部。我想要的是能够移动元素，并将其拖动到我点击的位置

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

---

那么，如何才能实现正确的行为呢？

这是因为元素的锚定点位于左上角

在您的

touchMove

功能中尝试以下操作：

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

这是一本书。您可以使用开发者工具中的设备模式在chrome上测试它

另外，您应该有一个

touchend

事件来重新初始化

z-index

（如果您还没有这样做）

编辑

因此，在

touchstart

事件中，必须保存元素的锚点（用户触摸元素的位置）

为此，可以使用

getBoundingClientRect（）

函数。这比依赖样式、顶部/左侧属性要好，因为它们可能未指定：

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

然后你用这个锚来计算元素的左上角，而不是元素的中心（就像我一开始想的那样）

---

这是

谢谢，但这并不完全是我所需要的，这集中了切入点。问题是如何按我拖动的点移动。例如，当元素是大矩形时，我如何将其拖动到左下角，因为这样做会更舒适。-第一个拖动示例-是我需要的，但我不能真正理解它在那里是如何工作的。

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