Main.html
<html>
<head>
<title>Draggable IFrame</title>
<style>
iframe {
position:absolute;
left:300px;
top:200px;
}
</style>
</head>
<body>
<iframe src="contents.html"></iframe>
</body></html>
Frame Content:contents.html
<html>
<head>
<title>Draggable IFrame</title>
<style>
#header {
text-align:center;
background-color:#0ff;
}
</style>
</head>
<body>
<div id="header" class="draggable">Title</div>
<div>this is content</div>
<script defer src="IFrame.js"></script>
</body></html>
IFrame.js
"use strict";
var addHandle = function(o){
o.style.cursor="move";
o.addEventListener("mousedown", mousedown, false)
};
var mousedown = function(evt){
var oStyle = evt.target.ownerDocument.documentElement.style;
oStyle.WebkitUserSelect = "none";
oStyle.MozUserSelect = "none";
oStyle.MsUserSelect = "none";
oStyle.userSelect = "none";
evt.target.nX = evt.pageX;
evt.target.nY = evt.pageY;
evt.target.addEventListener("mouseup", mouseup);
evt.target.addEventListener("mousemove", mousemove);
};
var mouseup = function(evt){
evt.target.style.cursor = "move";
var oStyle = evt.target.ownerDocument.documentElement.style;
oStyle.WebkitUserSelect = "all";
oStyle.MozUserSelect = "all";
oStyle.MsUserSelect = "all";
oStyle.userSelect = "all";
evt.target.removeEventListener("mousemove", mousemove);
evt.target.removeEventListener("mouseup", mouseup);
};
var mousemove = function(evt){
var oFrame = window.frameElement;
var oRect = oFrame.getBoundingClientRect();
var nX = oRect.left - (evt.target.nX - evt.pageX);
var nY = oRect.top - (evt.target.nY - evt.pageY);
nX = (nX >= 0? nX:0);
nY = (nY >= 0? nY:0);
oFrame.style.left = nX.toString()+"px";
oFrame.style.top = nY.toString()+"px";
};
(function(){
var Elems = document.getElementsByClassName("draggable");
for (var nPos = 0; nPos < Elems.length; nPos++) {
addHandle(Elems[nPos]);
}
})();
