如何拖動帶有標題的iframe以及最小化和最大化選項

Question

我有一個帶有標題“聊天”的iframe，如何拖動帶有標題的iframe以及最小化和最大化選項，或者如何拖動整個iframe而不是邊框​​。

Answer 1

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>