用户可调整大小和重新定位网页上的窗口

Question

几天来我一直在努力找出做我正在寻找的事情的最佳方法。我希望在我的页面上有一个包含 iframe 的元素，该元素可由最终用户调整大小和重新定位。 他们将能够随时调整它的大小并重新定位它，而后面的其余部分仍然可用

我已经尝试了一些jquery插件，但似乎没有一个能满足我的需求。

我找到了一个灯箱克隆列表（http://planetozh.com/projects/lightbox-clones/），但没有一个能满足我的需求。有没有人对可以实现这一目标的插件有任何想法？ 我可能只是没有想到正确的搜索词，并且陷入了死胡同。

Answer 1

结合使用 jQuery UI 可拖动和可调整大小来实现"窗口中的窗口"效果

$(document).ready(function() {
  $('#window')
    .resizable()
    .draggable();
});

#window {
  width: 150px;
  height: 80px;
  border: 1px solid #454;
  border-top: 5px solid blue;
  background-color: white;
  padding: 10px;
}
#window input {
  width: 40px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="window">
  <label>Your name:
    <input type="text" />
  </label>
  <br/>
  <button>Submit</button>
</div>