0

I have an iframe with header "chat" How can I drag that iframe with header along with minimize and maximize options or how can I drag the whole iframe instead of border.

Mounika
  • 35
  • 1
  • 8

1 Answers1

0

resizable() and draggable() of jquery will help you to do so.

hope this post might help you.

$(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>
Arif
  • 61
  • 4
  • Thank you so much it helps me a lot but how can we drag the whole iframe instead of border. – Mounika Oct 30 '18 at 09:16
  • @Mounika if you see the html code, the `div` with class **framewrap** which contains the `iframe`, has been applied to `draggable()` method in `jquery` snippet, which means we have applied the drag for whole `iframe`. Still you are not clear please share your code with us. – Arif Oct 30 '18 at 09:35
  • ok ,I understand now and it is working fine for me. Thanks a lot. – Mounika Oct 30 '18 at 10:37