0

假设我有这个简单的 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 可以做这样的事情。

谢谢你。

4

1 回答 1

0

我会从这里开始

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

} }

于 2013-05-21T18:24:21.193 回答