用于移动到屏幕部分的 Javascript 助手答案

【问题标题】：Javascript Helper for Moving into sections of the screen用于移动到屏幕部分的 Javascript 助手
【发布时间】：2015-09-09 13:13:28
【问题描述】：

有人可以根据我的要求推荐一个工具或库吗？

我想在屏幕上有一些带有文本的块，这些块可以拖到屏幕的不同部分，每个部分都是一个带有标题的矩形。理想情况下，当我将块移动到矩形中以更新状态时，我想调用一个 api。

我可能需要从头开始构建，但我想知道是否有一个类似于 gridster 的工具可以更快地进行原型制作。

【问题讨论】：

请重新评估您的问题 - 您的要求含糊不清，您的问题很难回答，而且任何答案都不太可能适用于该网站的其他用户。
不知道如何表达这个问题。如果我添加一个草图会有帮助吗？
如果您无法以书面形式描述您的要求，那么您将不太可能找到可以提供帮助的工具。意图的明确性非常重要。线框将帮助我们可视化问题。此外，就您的要求而言，Gridster 的优缺点是什么？祝你好运
要求有多清晰并不重要：堆栈溢出不允许软件/库/工具推荐。您可以在Software Recommendations 尝试，但请务必在询问之前查看他们的发帖规则。我相信他们需要一份明确的目标清单，该工具应包括
这个网站的规则太多了。问一个问题并得到一些答案有什么问题

标签： jquery gridster

【解决方案1】：

你可以使用jQuery可拖动。

例子：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>


</body>
</html>

Source。 API documentation.

【讨论】：

很好，我去看看