javascript - 控制拖动事件移动到特定的div

标签 javascript jquery html css jquery-ui

假设我有这个简单的 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 - 如果用户在 blu div 中向下拖动,则在此 div 中继续。如果用户在蓝色 div 中向上拖动,则滚动会移动到上一个:绿色 div。

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

谢谢。

最佳答案

我会从这里开始

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

}

关于javascript - 控制拖动事件移动到特定的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16676042/

相关文章:

jquery - 如何使用 jQuery 使 textarea 处于非事件状态

javascript - "Make this page your Startpage"脚本(JavaScript)

javascript - 使用jsp和javascript的异步文件上传(AJAX文件上传)

jquery - 如何延迟 google 分析的 jquery 事件

javascript - 使用javascript更新div的内容

html - 如何在 bootstrap 4 中的 flexbox 包装元素之间添加垂直间距?

javascript - 如果我有它的 id 值,如何获取和更新数组中的 AngularJS 对象?

javascript - 奇怪的结果还是我错了?

jquery - 使用 jQuery 在另一个 div 内的 div 之间切换?

html - Jekyll 不显示 GIF