Question

考虑可滚动区域中可拖动div的情况。当您触摸div内部时，进一步的手指移动应该将div拖动到该区域周围。当您触摸div外部时，进一步的手指移动应平移可滚动区域。

我有一个JSFiddle来说明这一点。使用鼠标，我可以轻松地拖动div，但触摸事件似乎也不起作用。

注意：我在小提琴中使用了指针事件，所以如果您使用的浏览器不支持它们，那么小提琴似乎就会被打破。

有谁知道如何正确实施此互动？

HTML：

<div id="scroll-outer">
  <div id="scroll-inner">
    <div id="handle">
    </div>
  </div>
</div>

CSS：

#scroll-outer { width: 400px; height: 400px; overflow: auto }
#scroll-inner { width: 2000px; height: 2000px }
#handle { width: 44px; height: 44px; background-color: rgba(0,0,0,0.5) }

JS：

function pointerDown(ev) {
  scrollInner.addEventListener("pointermove", pointerMove);
  scrollInner.addEventListener("pointerup", pointerUp);

  dragStartX = ev.pageX; dragStartY = ev.pageY;
}

function pointerMove(ev) {
  handle.style.transform = "translate3d(" +
    (x + ev.pageX - dragStartX) + "px, " +
    (y + ev.pageY - dragStartY) + "px, 0)";
}

function pointerUp(ev) {
  scrollInner.removeEventListener("pointermove", pointerMove);
  scrollInner.removeEventListener("pointerup", pointerUp);

  x = x + ev.pageX - dragStartX;
  y = y + ev.pageY - dragStartY;
}

var x = 0;
var y = 0;
var dragStartX = 0;
var dragStartY = 0;

var handle = document.getElementById("handle");
var scrollInner = document.getElementById("scroll-inner");
handle.addEventListener("pointerdown", pointerDown);

Answer 1

要在元素上使用基于触摸的输入触发指针事件，您需要在该元素上设置CSS属性touch-action: none（默认为auto）。

在touch-action: none设置div#handle的情况下，可以将其设置为可拖动。

添加：如果您使用PEP，则必须将HTML数据属性touch-action="none"添加到元素中，例如：

...
<div id="handle" touch-action="none"></div>
...

支持使用指针事件在可滚动div中进行拖动和平移

1 个答案: