使用触摸输入时，javascript 拖放不会偏移拖动图像

Question

我正在项目中使用 html5 拖放功能。我正在尝试更改拖动图像相对于输入（鼠标或手指）位置的位置。使用鼠标时，以下代码在桌面上运行良好，但是在手机屏幕上使用触摸面板时，图像永远不会偏移。

我最初认为这可能是屏幕像素密度问题，但即使我用更大的数字替换偏移量，也没有任何反应。

    function dragStart(ev)
    {
        console.log("dragging");
        console.log(ev);

        // Place the drag image offset to the mouse cursor location
        ev.dataTransfer.setDragImage(ev.target, 50, 50);

        ev.dataTransfer.setData("text", ev.target.dataset.tileIndex);
    }

Answer 1

拖动事件是鼠标事件，在触摸设备上支持不佳。因此，在许多触摸设备上，不仅拖动图像无法正常工作，甚至拖动事件也无法正常工作。为了更好地支持触摸设备，您可以尝试处理触摸事件。

const X_OFFSET = 20;
const Y_OFFSET = 20;

const dragItem = document.getElementById("DragItem");
let imageElement = null;

function dragStart(event) {
  if (!event.dataTransfer || !event.target) {
    return;
  }

  // Place the drag image offset to the mouse cursor location
  event.dataTransfer.setDragImage(event.target, X_OFFSET, Y_OFFSET);

  event.dataTransfer.setData('text/html', event.target);
}

function touchStart(event) {
  var touch = event.targetTouches[0];

  const image = event.target.cloneNode(true);
  image.style.position = 'fixed';
  image.style.display = 'none';
  document.body.appendChild(image);
  imageElement = image;
}

function touchMove(event) {
  const touch = event.targetTouches[0];
  const left = touch.pageX - X_OFFSET;
  const top = touch.pageY - Y_OFFSET;

  if (imageElement) {
    imageElement.style.left = left + 'px';
    imageElement.style.top = top + 'px';
    imageElement.style.display = 'block';
  }
}

function touchEnd(event) {
  if (imageElement) {
    document.body.removeChild(imageElement);
    imageElement = null;
  }
}

dragItem.addEventListener("dragstart", dragStart);
dragItem.addEventListener("touchstart", touchStart);
dragItem.addEventListener("touchmove", touchMove);
dragItem.addEventListener("touchend", touchEnd);

<main className="flex min-h-screen flex-col items-center justify-between p-24">
  <div style="user-select:none; touch-action: none;" id="DragItem" draggable="true">
    Drag me
  </div>
</main>