5 dakkada yaparız n'olcak diye başladım da baya vaktimi yedi, pişman olmadım değil hani
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CODEKSPER</title>
<style type="text/css">
body{padding:0;margin:0;}
#a{ position:relative;width:1000px;height:600px;margin:0 auto;background:#000; }
#b{ position:absolute;z-index:1;left:0;top:0;width:200px;height:50px;background:#ffff00;font-weight:bold;line-height:50px;text-align:center;}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
</div>
<script type="text/javascript">
var a = document.getElementById("a");
var b = document.getElementById("b");
var a_w = a.clientWidth;
var a_h = a.clientHeight;
var b_w = b.clientWidth;
var b_h = b.clientHeight;
b.innerHTML = "CODEKSPER";
var left_space=0,top_space=0;
b.onmousedown = function(e){
var xStart = e.pageX;
var yStart = e.pageY;
var lsOld = left_space;
var tsOld = top_space;
var ls,ts;
document.onmousemove = function(e){
xEnd = e.pageX;
yEnd = e.pageY;
ls = (xEnd-xStart)+lsOld;
ts = (yEnd-yStart)+tsOld;
if( ls < 1 ){ ls = 0; }else if( ls >= (a_w-b_w) ){ ls = a_w-b_w; }
if( ts < 1 ){ ts = 0; }else if( ts >= (a_h-b_h) ){ ts = a_h-b_h; }
left_space = ls;
top_space = ts;
b.style.left=ls+"px";
b.style.top=ts+"px";
}
document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null; }
}
</script>
</body>
</html>---------------
EDIT: 400x400 bir div içinde 1600x1600 kısmında anlatılanın tam tersini anlamışım. Yine de de kod üstünde biraz matematik pratiği yaparsanız sorun çözülür.
Kolay gelsin.