css

* {padding: 0;margin: 0;box-sizing: border-box;}
.main {width: 1000px;height: 700px;position: absolute;left: 50%;top: 50%;margin-top: -350px;margin-left: -500px;border: 1px solid red;overflow: hidden;}
.window {width: 334px;height: 300px;box-shadow: 0px 0px 10px #e8e8e8;position: absolute;left: 10px;top: 10px;border-radius
 
: 4px;}
.win-header {height: 30px;width: 100%;border-bottom: 1px solid #e8e8e8;}
.win-body {width: 100%;height: 100%;padding-bottom: 30px;}
.win-body iframe {width: 100%;height: 100%;border: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-khtml-user-select: none;user-select: none;}
.win-sys-btns
 
 {float: left;}
.win-sys-btns {height: 100%;padding: 2px 5px;font-size: 14px;float: left;line-height: 26px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-khtml-user-select: none;user-select: none;}
.win-menu {cursor: pointer;}
.win-menu+.win-menu {margin-left: 5px;}
.win-menu-close:hover:before
 
 {content: "\f057";}
.win-menu-close {color: #FF6057;}
.win-menu-min {color: #28CA40;}
.win-menu-min:hover:before {content: "\f056";}
.win-menu-max {color: #FFBD2E;}
.win-menu-max:hover:before {content: "\f139";}

html

<div class="main">
	<div class="window">
		<div class="win-header">
			<div class="win-sys-btns">
				<i class="fa fa fa-circle win-menu win-menu-close"></i>
				<i class="fa fa fa-circle win-menu win-menu-min"></i>
				<i class="fa fa fa-circle win-menu win-menu-max"></i>
			</div>
		</div>
		<div class="win-body">
			<iframe scrolling="no" src="http://www.baidu.com"></iframe>
		</div>
	</div>
</div>

js

$.fn.extend({
	drag: function(options) {
		var win = null;
		function _drag(e) {
			win = this;
			// 是否限制範圍
			var isLimit = false;
			// 範圍資訊
			var range = {};
			// 視窗大小
			var winRange = {
				w: $(win).outerWidth(),
				h: $(win).outerHeight(),
			}
			if(options) {
				if(options.limit && options.elem) {
					isLimit = !isLimit;
				}
			}
			if(isLimit) {
				// 設定範圍資訊
				range = {
					maxX: $(options.elem).outerWidth() - winRange.w,
					maxY: $(options.elem).outerHeight() - winRange.h,
					minX: 0,
					minY: 0
				};
			}
			var clientX = e.clientX;
			var clientY = e.clientY;
			var offsetLeft = win.offsetLeft;
			var offsetTop = win.offsetTop;
			$(document).bind('mousemove', moveEvent);
			// 滑鼠移動事件處理
			function moveEvent(e) {
				var spaceX = e.clientX - clientX,
					spaceY = e.clientY - clientY,
					x = spaceX + offsetLeft,
					y = spaceY + offsetTop;
				if(isLimit) {
					x = x < range.minX ? 0 : (x > range.maxX ? range.maxX : x);
					y = y < range.minY ? 0 : (y > range.maxY ? range.maxY : y)
				}
				$(win).css({
					left: x + 'px',
					top: y + 'px'
				});
			}
		}
		function endMove(e) {
			if(win) {
				if(win.offsetLeft < 0) {
					$(win).css("left", 0);
				}
				if(win.offsetTop < 0) {
					$(win).css("top", 0);
				}
				$(win).find("iframe").css("pointer-events", "auto");
			}
			$(document).unbind('mousemove');
		}
		$(this).css("position", "absolute")
		$(document).bind('mouseup', endMove);
		$(this).bind('mousedown', function(e) {
			$(this).find("iframe").css("pointer-events", "none")
			_drag.apply(this, [e]);
		});
		return this;
	}
});
// 呼叫移動函式，如果不需要限制區域，就無需傳遞引數
// .window :要拖拽的元素
// .main 限制的區域
$(".window").drag({
	limit: true,
	elem: ".main"
})