javascript - 更改 div 位置 ontouchdrag(如果此类事件可用)

Question

基本上，我有一个网页，它是一个 div 内的一个 div。假设 div 1(容器)高 500 像素。 Div 2 在该容器内高 100 像素。我想要做的是检测用户触摸屏幕上的 div 2(这是手机上的网页)，当他们向上/向下拖动时，div 会随之移动。我做了一些研究，看到这是在 CSS 3 中使用 matrix3d 和变换 y 完成的(但对于像我这样对这类事情经验不足的人，我找不到很好的解释)。我想要它，比方说，用户将第二个 div 拖到底部，并且一些内容超出了容器 div。我不希望它向下滚动，我确实希望它消失......但我希望它有点“反弹”回到视野中。所以这是分割。

• 用户按下屏幕
• 用户拖动 div 1 内部的 div 2。当他们拖动 div 时，它会向他们拖动的方向移动。
• 用户可以将 div 向右拖动到顶部/底部。如果他们将它拖到容器 div 之外，那很好。容器 div 不应调整大小或变为可滚动，并且 div 2 的一部分应从 View 中消失。
• 当用户释放拖动时，div 应该弹回原位。比方说，如果它被向上拖得太高，它会弹回位置 100、100。如果它被向下拖得太远，它就会弹回 100、500(我认为弹跳可以通过 CSS 转换来控制)。<

那么，有没有人有我可以查看的示例或可以帮助我了解如何实现此目的的教程？我很抱歉没有提供任何代码作为开始的基础，但事实上，我真的不知道从哪里开始。

非常感谢任何帮助。

Answer 1

safari 开发文档是你的 friend :

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

检查用于移动 div 的触摸移动部分，对于您的情况，您想要设置条件以判断用户是否超出外部 div 的边界，并使用 overflow hidden 禁用滚动。