在页面上移动/拖动 DIV 的最佳方式？ [复制]
Posted
技术标签:
【中文标题】在页面上移动/拖动 DIV 的最佳方式？ [复制]【英文标题】：Best way to move/drag DIV around the page? [duplicate] 【发布时间】：2021-05-26 06:34:42 【问题描述】：遇到一些问题，试图找到解决此问题的正确方法。现在，我有一些功能，在用户右键单击上下文菜单后，有一个侦听器将触发 API 获取并在 div 内显示数据。目前，DIV 位于页面右下角的固定位置。我的目标是让 div 可以拖动，以便用户可以根据需要移动它，并且 div 不会干扰其背后的数据。
谷歌搜索，我找到了一些 js 框架，但我不知道如何实现它们。谁能建议解决这个问题的最佳方法？
这就是 div 现在的样子。谢谢！ current div
【问题讨论】：
【参考方案1】：您可以使用jQueryUI library中的可拖动功能。
Download 库并确保选中 Draggable 复选框。
然后，将库链接到您的 html：
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
最后，在您的 javascript 代码中使用 draggable，如下所示：
$( "#my_div" ).draggable(
);
例子：
$(function()
$( "#my_div" ).draggable(
);
);<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
</head>
<body>
<div id="my_div" style="width:300px;height:300px;border:1px solid black;">
HELLO<br>
World<br>
World<br>
World<br>
</div>
</body>
</html>【讨论】：
以上是关于在页面上移动/拖动 DIV 的最佳方式？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章