<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<script type="text/javascript">
//div1.onmousedown = function(){
document.documentElement.onmousedown=function(){
var iTarge = event.target || event.srcElement;
if(iTarge.className == 'div1'){
var l = event.clientX - iTarge.offsetLeft;
var t = event.clientY - iTarge.offsetTop;
document.onmousemove = function(){
iTarge.style.background = 'pink';
var needX = event.clientX - l;
var needY = event.clientY - t;
if(needX<0){needX=0;}
if(needY<0){needY=0;}
var w = innerWidth - iTarge.offsetWidth;
var h = innerHeight - iTarge.offsetHeight;
if(needX>w){needX = w;}
if(needY>h){needY = h;}
iTarge.style.left = needX + 'px';
iTarge.style.top = needY + 'px';
}
document.onmouseup = function(){
iTarge.style.background = 'cornflowerblue';
document.onmousemove = null;
document.onmouseup = null;
}
}
}
//div1.onmouseup = function(){
// div1.onmousedown = null;
// div1.onmouseup = null;
//}
</script>
</body>
