JQuery UI可隨指針一起拖動

Question

上午構建了一個具有可拖動面板的頁面。其中有一個標準的網格。當我向下滾動網格時，可拖動面板隨指針一起移動。 「」

$（「＃drag」）。draggable（）;

我還使用了下面的選項但沒有用 •helper：clone; •位置：絕對;幫手 •scroll：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>