0

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

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

注意：我在小提琴中使用了指针事件，所以如果您使用的浏览器不支持它们，看起来小提琴似乎坏了。

有谁知道如何正确实现这种交互？

http://jsfiddle.net/mrmills/13t34jsv/

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);
4

1 回答 1

4

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

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

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

...
<div id="handle" touch-action="none"></div>
...
于 2016-05-13T19:18:48.863 回答