prettify

baseline

Draggable IFRAME

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]);
 }
})();