可调整大小和可拖动的div

Question

我正在制作windows javascript模拟。现在，我正在创建程序窗口。他们有这样的代码：

    <div class="program" draggable="true">
            ...more imgs
    <img src="./res/img/closeButton.png" title="Close">
    <iframe src="./programs/fileExplorer" width="900px" height="500px" class="programBorder"></iframe>
</div>

我需要使整个div可拖动（在顶部栏上）并且可调整大小（侧边和底部条形图满，顶部只有小部分）。没有javascript（仅限css）完成它会很酷，但是用javascript / JQuery做它是可以的

Answer 1

使用jQueryUI，http://jqueryui.com/dialog/它既有可拖动和可重复的选项，也可以通过库实现相同的逻辑。

Answer 2

可拖动元素

目前不使用css + html制作可拖动元素是不可能的。你能做的就是用jQuery来解决这个问题。或者，您可以看到this answer另一个问题，该问题解释了如何在没有jQuery的情况下制作可拖动元素。

可调整大小的元素

这个确实只能用CSS做，而且非常简单。只需在元素上使用resize:both即可。 This table显示浏览器支持仅限CSS调整大小，因此您在制作网站时应该考虑这一点。你也可以使用jQuery作为IE的后备。

Here 是针对不同类型的调整大小的演示。