用JS触摸点击附近的拖放位置

Touch drag-and-drop positioning near tap with JS

本文关键字：拖放 位置 JS 触摸      更新时间：2024-01-31

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

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

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

发生这种情况是因为元素的锚点在左上角。

在你的touchMove函数中试试这个：

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

这是一把正在工作的小提琴。您可以使用开发工具中的设备模式在chrome上测试它。

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

编辑

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

为此，您可以使用getBoundingClientRect()函数。这比依赖样式、顶部/左侧属性要好，因为它们可能没有指定：

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

然后使用这个anchor来计算左上角，而不是元素的中心（正如我最初所想的那样）。

这是更新的fiddle

相关文章：