在页面上移动/拖动 DIV 的最佳方式？ [复制]

【问题标题】：Best way to move/drag DIV around the page? [duplicate]在页面上移动/拖动 DIV 的最佳方式？ [复制]
【发布时间】：2021-05-26 06:34:42
【问题描述】：

遇到一些问题，试图找到解决此问题的正确方法。现在，我有一些功能，在用户右键单击上下文菜单后，有一个侦听器将触发 API 获取并在 div 内显示数据。目前，DIV 位于页面右下角的固定位置。我的目标是让 div 可以拖动，以便用户可以根据需要移动它，并且 div 不会干扰其背后的数据。

谷歌搜索，我找到了一些 js 框架，但我不知道如何实现它们。谁能建议解决这个问题的最佳方法？

这就是 div 现在的样子。谢谢！ current div

【问题讨论】：

标签： javascript html css google-chrome-extension

【解决方案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>

【讨论】：