Question

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

我们有一个本机应用程序，我们正在将部分内容移植到Web上。目前，我们可以将一些窗口拖出主窗口以创建一个单独的窗口。我们希望支持与基于Web的应用程序版本类似的内容。

我们目前没有与UI的任何特定javascript框架相关联，因此可以理解任何有关此功能的Web UI框架当前状态的信息。

Answer 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你可以试试。当您关闭弹出窗口时，它会将内容移回。请注意，如果您计划移动动态内容，则可能需要自己额外的布线。

Answer 2

可以在网上找到。

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

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

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

正常工作需要时间

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

Answer 3

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

我自己从未使用它作为专有技术，但演示看起来非常有前途。这是一个显示＆＃34;虚拟窗口＆＃34;：Web Desktop

Answer 4

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

在Web框架中撕下小部件？

4 个答案: