JQuery UI 可与指针一起拖动

Question

正在构建一个具有可拖动面板的页面。其中它有一个标准网格。当我向下滚动网格时，可拖动面板会随着指针移动。“”

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

我也使用了以下选项，但没有用• 助手:克隆；• position:absolute； helper • 滚动:true•刷新位置:true

请建议我如何解决此问题。

Answer 1

我 90% 确定这就是你的意思，如果不是，请发表评论。

下面使用 scroll() 函数来检测滚动，然后使用 scrollTop() 来检测滚动量。然后，从之前的滚动量中减去该值后，该值将应用于 $("#drag") 的顶部 css 属性。

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

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

#drag {
	width:100px;
	height:100px;
	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>