barretlee/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Move Obj Demo</title>
<style id="jsbin-css">
html, body {
  height: 100%;
  overflow: hidden;
}
#obj {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position: absolute;
  left: 0;
  top: 0;
  cursor: move;
}
</style>
</head>
<body>

<div id="obj"></div>

<script id="jsbin-javascript">
obj.onmousedown = function(e){

	var e = e || window.event
	  , sX = (e.pageX || e.clientX) - parseInt(obj.offsetLeft, 10)
      , sY = (e.pageY || e.clientY) - parseInt(obj.offsetTop, 10);

    document.body.onmousemove = function(e){

        document.body.onmouseup = document.body.onmouseleave = function(e){
            document.body.onmousemove = document.body.onmouseup = document.body.onmouseleave = null;
        };

        with(obj.style){
            left = (e.pageX || e.clientX) - sX + "px";
            top = (e.pageY || e.clientY) - sY + "px";
        }
    };
};
</script>


<script id="jsbin-source-css" type="text/css">html, body {
  height: 100%;
  overflow: hidden;
}
#obj {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position: absolute;
  left: 0;
  top: 0;
  cursor: move;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">obj.onmousedown = function(e){

	var e = e || window.event
	  , sX = (e.pageX || e.clientX) - parseInt(obj.offsetLeft, 10)
      , sY = (e.pageY || e.clientY) - parseInt(obj.offsetTop, 10);

    document.body.onmousemove = function(e){

        document.body.onmouseup = document.body.onmouseleave = function(e){
            document.body.onmousemove = document.body.onmouseup = document.body.onmouseleave = null;
        };

        with(obj.style){
            left = (e.pageX || e.clientX) - sX + "px";
            top = (e.pageY || e.clientY) - sY + "px";
        }
    };
};</script></body>
</html>

## jsbin.canizo.css
html, body {
  height: 100%;
  overflow: hidden;
}
#obj {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position: absolute;
  left: 0;
  top: 0;
  cursor: move;
}

## jsbin.canizo.js
obj.onmousedown = function(e){

	var e = e || window.event
	  , sX = (e.pageX || e.clientX) - parseInt(obj.offsetLeft, 10)
      , sY = (e.pageY || e.clientY) - parseInt(obj.offsetTop, 10);

    document.body.onmousemove = function(e){

        document.body.onmouseup = document.body.onmouseleave = function(e){
            document.body.onmousemove = document.body.onmouseup = document.body.onmouseleave = null;
        };

        with(obj.style){
            left = (e.pageX || e.clientX) - sX + "px";
            top = (e.pageY || e.clientY) - sY + "px";
        }
    };
};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Move Obj Demo</title>
	<style id="jsbin-css">
	html, body {
	height: 100%;
	overflow: hidden;
	}
	#obj {
	width: 100px;
	height: 100px;
	border: 1px solid red;
	position: absolute;
	left: 0;
	top: 0;
	cursor: move;
	}
	</style>
	</head>
	<body>

	<div id="obj"></div>

	<script id="jsbin-javascript">
	obj.onmousedown = function(e){

	var e = e \|\| window.event
	, sX = (e.pageX \|\| e.clientX) - parseInt(obj.offsetLeft, 10)
	, sY = (e.pageY \|\| e.clientY) - parseInt(obj.offsetTop, 10);

	document.body.onmousemove = function(e){

	document.body.onmouseup = document.body.onmouseleave = function(e){
	document.body.onmousemove = document.body.onmouseup = document.body.onmouseleave = null;
	};

	with(obj.style){
	left = (e.pageX \|\| e.clientX) - sX + "px";
	top = (e.pageY \|\| e.clientY) - sY + "px";
	}
	};
	};
	</script>


	<script id="jsbin-source-css" type="text/css">html, body {
	height: 100%;
	overflow: hidden;
	}
	#obj {
	width: 100px;
	height: 100px;
	border: 1px solid red;
	position: absolute;
	left: 0;
	top: 0;
	cursor: move;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">obj.onmousedown = function(e){

	var e = e \|\| window.event
	, sX = (e.pageX \|\| e.clientX) - parseInt(obj.offsetLeft, 10)
	, sY = (e.pageY \|\| e.clientY) - parseInt(obj.offsetTop, 10);

	document.body.onmousemove = function(e){

	document.body.onmouseup = document.body.onmouseleave = function(e){
	document.body.onmousemove = document.body.onmouseup = document.body.onmouseleave = null;
	};

	with(obj.style){
	left = (e.pageX \|\| e.clientX) - sX + "px";
	top = (e.pageY \|\| e.clientY) - sY + "px";
	}
	};
	};</script></body>
	</html>