Question

让我们说我有这个简单的HTML结构：

<header>
    <title>Test</title>
</header>
<body>
    <div class="section" id="section-1"></div>
    <div class="section" id="section-2"></div>
    <div class="section" id="section-3"></div>
</body>

...和这个CSS样式：

.section{
    float: left;
    width: 100%;
    height: 600px;
}

#section-1{ background: red; }
#section-2{ background: green; }
#section-3{ background: blue; }

您可以在此检查它是否有效：http://jsfiddle.net/ZMv2r/

我试图找到一种方法，用户可以垂直拖动此页面，并根据用户的位置，转到特定的div。

1 - 如果用户在红色div中向下拖动，则滚动移动到下一个：绿色div。如果用户在红色div中向上拖动，则在此div中继续。

2 - 如果用户在绿色div中向下拖动，则滚动移动到下一个：蓝色div。如果用户在绿色div中向上拖动，则滚动移动到前一个：红色div。

3 - 如果用户在蓝色div中向下拖动，则在此div中继续。如果用户在蓝色div中向上拖动，则滚动移动到前一个：绿色div。

我不知道在哪里可以开始做这些动作。我认为也许jQuery UI可以做这样的事情。

谢谢。

Answer 1

我会从这里开始

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Touch_events?redirectlocale=en-US&redirectslug=Web%2FGuide%2FTouch_events

类似

function handleStart(evt) {
evt.preventDefault();
var el = document.getElementsByTagName("canvas")[0];
var ctx = el.getContext("2d");
var touches = evt.changedTouches;

for (var i=0; i<touches.length; i++) {
  ongoingTouches.push(touches[i]);
  var color = colorForTouch(touches[i]);
  ctx.fillStyle = color;
  ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);

} }

控制拖动事件以移动到特定div

1 个答案: