如何拖动带标题的iframe以及最小化和最大化选项

 jquery的resizable()和draggable()将帮助您做到这一点。

希望这篇文章能对你有所帮助。

$(function() {
"use strict";
$(".framewrap").resizable().draggable();
$(".framewrap .actionIcon").on("click", function() {
$(this).closest(".framewrap").toggleClass("min");
});
});

.body_padding {
padding: 16px;
}
.framewrap {
padding-right: 10px;
padding-left: 10px;
padding-bottom: 28px;
background-color: #121101;
width: 512px;
height: 90px;
-webkit-box-shadow: 2px 2px 16px -2px;
box-shadow: 2px 2px 16px -2px;
border-radius: 12px;
position: absolute;
}
.framewrap span {
color: #FFFFFF;
font-size: small;
font-style: normal;
font-weight: 100;
}
.framewrap .actionIcon {
display: inline-block;
float: right;
height: 18px;
width: 18px;
background-image: url(http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/minimize_window.png);
background-size: cover;
background-position: center center;
cursor: pointer;
}
.framewrap.min {
height: 90px !important;
width: 256px !important;
}
.framewrap.min .actionIcon {
background-image: url(http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/maximize_window.png);
}
.frame {
width: 100%;
height: 100%;
background-color: #fff;
}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<div>
<div class="framewrap">
<span>Chat</span>
<span class="actionIcon"></span>
<iframe class="frame" src=""></iframe>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>