JQueryのUIは、ポインタと一緒にドラッグ可能です

Question

ドラッグ可能なパネルを持つページを構築しています。それには標準のグリッドがあります。グリッドを下にスクロールすると、ドラッグ可能なパネルがポインタとともに移動します。 ""

$（ "＃drag"）。draggable（）;

以下のオプションも使用しましたが、役に立たない •helper：clone; •位置：絶対;ヘルパー •スクロール：true •refreshPositions：true

この問題を解決する方法を教えてください。

Answer 1

私は90％確信しています。そうでない場合は、コメントだけです。

以下はscroll()機能を使用してスクロールを検出し、次にscrollTop()を使用してスクロール量を検出します。その値はスクロールされた前の量から差し引かれた後、$("#drag")のトップCSS属性に適用されます。

$("#drag").draggable(); 
 

 
previous = 0; 
 
$(window).scroll(function() { 
 
\t currentDelta = $(window).scrollTop() - previous; 
 
\t previous = $(window).scrollTop(); 
 
\t $("#drag").css("top", (Number($("#drag").css("top").slice(0,-2))) + currentDelta + "px"); 
 
});

#drag { 
 
\t width:100px; 
 
\t height:100px; 
 
\t background-color:red; 
 
} 
 

 
/* makes the page longer */ 
 
body { 
 
    height:1200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div id="drag"></div>