撕下Web框架中的小部件？答案

【问题标题】：Tear off widgets in web framework?撕下Web框架中的小部件？
【发布时间】：2016-07-31 06:09:10
【问题描述】：

是否有可能，是否存在任何支持 Web 浏览器中可撕下小部件的框架？即在 Visual Studio 中，您可以将任何窗口拉出主窗口以创建一个单独的浮动窗口。

我们有一个本地应用程序，我们将其部分移植到网络上。目前我们有能力将一些窗口拖出主窗口以创建一个单独的窗口。我们希望在基于 Web 的应用版本中支持类似的功能。

我们目前没有绑定到任何特定的 UI javascript 框架，因此如果您能深入了解 Web UI 框架在此功能方面的当前状态，我们将不胜感激。

【问题讨论】：

检查这个github.com/STRML/react-grid-layout（它是用于React框架的）
那是网格布局。我们正在寻找可撕下的工具窗口。
您在浏览器中运行是吗？我没有听说过。有趣的是你可以做到。弄清楚机械原理需要一些肘部油脂。首先，您的“小部件”必须设计为能够在新的浏览器窗口中独立存在。
你要撕掉哪些小部件？
不同的表示层通常需要重新考虑您的应用程序设计。尽管这在技术上可行且可行，但我真的想知道您在设计应用程序时是否考虑到了网络。例如考虑移动客户端，其中每个被撕下的小部件宁愿成为一个单独的选项卡。这可能不是用户想要的。我宁愿检查是否允许最小化/隐藏工具面板并在屏幕上重新排序，而不是撕掉它们。移植应用程序时需要进行一些交易，这就是事物的本质:)

标签： javascript html single-page-application

【解决方案1】：

这真的取决于你想要实现什么，但这里有一个 jQuery 的直截了当的例子：

function popup(id) {
  $('#' + id + '-pop').prop('disabled', true);

  var popup = window.open('', 'popup', 'resizable=yes');
  var content = $('#' + id).detach();
  $(popup.document.body).append(content);

  popup.onbeforeunload = function() {
    $('#' + id + '-pop').prop('disabled', false);
    content.appendTo($('#' + id + '-parent'));
  };
}

.tearable-parent {
  border: 1px #000 solid;
  display: inline-block;
  padding: 5px;
  margin: 5px;
}

button {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
  <div id="t1-parent" class="tearable-parent">
    <div id="t1">
      <span>This is tearable.</span>
    </div>
  </div>
  <button id="t1-pop" onclick="popup('t1')">Pop me up</button>
</body>

您不能在此处运行示例，因为不允许弹出窗口，但这里有一个fiddle link，您可以在其中尝试。当您关闭弹出窗口时，它会将内容移回。请注意，如果您计划移动动态内容，您可能需要自己的额外接线。

【讨论】：

【解决方案2】：

在网络上是可能的。

我认为这是个坏主意。原因如下：

弹出窗口，产生新窗口的机制，可能会被阻止，

这是不常见的做法，因此会打破用户的期望，

正常工作可能需要时间

另一种方法是在网页内设置虚拟窗口，我的意思是制作类似的东西，除了在页面内使用 div，可以最小化和移动但只能在页面内

【讨论】：

【解决方案3】：

我同意@Walle。 “虚拟窗口”方法比使用弹出窗口更好。我会看看 Sencha 和他们的 Ext JS 平台：Sencha Ext JS

我自己从未使用过它，因为它是专有的，但是演示看起来很有前途。这是显示“虚拟窗口”的一个：Web Desktop

【讨论】：

这是一种有趣的技术，但需要开发人员重新考虑他们的方法（与许多其他框架一样）。他们有一个非常声明性的方法，他们的文档不是最好的，但是我在一两年前使用它，一旦你掌握了它，它就是一个非常好的框架。如果你愿意付费，那是另外一回事，很多其他免费框架都提供了类似的技术

【解决方案4】：

如果您将 Windows 应用程序移植到 Web 应用程序（我在过去几年一直这样做），那么市场上没有任何东西可以与 extjs 相媲美，尤其是如果它是一个企业应用程序。

【讨论】：