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。您可以使用开发人员工具中的设备模式在chrome上测试它。

PS。您应该有一个touchend事件来重新初始化z-index（如果您还没有这样做）。

修改

因此，在touchstart事件中，您必须保存元素的锚点（用户触摸元素的位置）。

为此，您可以使用getBoundingClientRect()功能。最好依赖于样式，top / left属性，因为它们可能没有指定：

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

然后你使用这个anchor计算顶部/左边而不是元素的中心（正如我先想到的那样）。

以下是updated fiddle

使用JS触摸水龙头附近的拖放定位

1 个答案: