move/drag DIV 左右页面的最佳方式？

Question

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

谷歌，我找到了一些js框架，但我不知道如何实现它们。任何人都可以建议哪种方法是解决此问题的最佳方法？

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

Answer 1

您可以使用 jQueryUI library 中的 Draggable 函数。

Download 库并确保 select Draggable 复选框。

然后，link图书馆到你的 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>

move/drag DIV 左右页面的最佳方式？

Best way to move/drag DIV around the page?

html

javascript

css

google-chrome-extension