Javascript 控件拖动事件以移动到特定div_Javascript_Jquery_Html_Css_Jquery Ui

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

javascript jquery html css jquery-ui

Javascript 控件拖动事件以移动到特定div,javascript,jquery,html,css,jquery-ui,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="sec

假设我有一个简单的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>

在这里，您可以检查它是否正常工作：

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

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

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

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

我不知道从哪里开始做这些动作。我想也许jQueryUI可以做这样的事情

谢谢。

我从这里开始

差不多

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

功能手柄启动（evt）{
evt.preventDefault（）；
var el=document.getElementsByTagName（“画布”）[0]；
var ctx=el.getContext（“2d”）；
var Touchs=evt.ChangedTouchs；
对于（var i=0；iYou应该能够使用jqueryui拖动来完成它）&drop@roasted但是拖放不会使div成为可拖动的？我不希望出现这种行为…您可以将可拖动方法应用于特定元素。我只是意识到我不明白您试图做什么。您的意思是：“我正试图找到一种用户可以垂直拖动此页面的方法”？你是说改为滚动吗？@就像触摸设备一样，上下滚动页面。
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);