Javascript：实操---拖拽(完整版)

CSS部分

<style type="text/css">
body{height: 3000px;
    width: 3000px;}
#div1{
    height: 100px;
    width: 100px;
    background-color: #ccc;
    position: absolute;
}
</style>

HTML部分

<div id="div1">DFDSF</div>
我发的思考附近的刷卡费的口附近的思考的撒发开急速    
</body>

JS部分

<script type="text/javascript">

window.onload=function (){

　　var oDiv=document.getElementById("div1");

　　var maxHeight=document.documentElement.clientHeight-oDiv.offsetHeight;

　　var maxWidth=document.documentElement.clientWidth-oDiv.offsetWidth;

　　oDiv.onmousedown=function (e){

　　　　var oEvent=e||window.event;

　　　　var disX=oEvent.clientX-oDiv.offsetLeft;

　　　　var disY=oEvent.clientY-oDiv.offsetTop;

　　　　var bodyScrollTop=document.body.scrollTop||document.documentElement.scrollTop;

　　　　var bodyScrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft;

　　　　document.onmousemove=function (ev){

　　　　　　var oEvent=ev||window.event;

　　　　　　var x=oEvent.clientX-disX;

　　　　　　var y=oEvent.clientY-disY;

　　　　　　if(y<=bodyScrollTop){

　　　　　　　　y=bodyScrollTop;

　　　　　　}else if(y>=maxHeight+bodyScrollTop){

　　　　　　　　y=bodyScrollTop+maxHeight;

　　　　　　}

　　　　　　if(x<=bodyScrollLeft){

　　　　　　　　x=bodyScrollLeft;

　　　　　　}else if(x>=bodyScrollLeft+maxWidth){

　　　　　　　　x=bodyScrollLeft+maxWidth;

　　　　　　}

　　　　　　document.title=y;

　　　　　　oDiv.style.left=x+"px";

　　　　　　oDiv.style.top=y+"px";

　　　　}

　　　　document.onmouseup=function (){

　　　　　　if(oDiv.releaseCapture){

　　　　　　　　oDiv.releaseCapture();

　　　　　　}

　　　　　　document.onmousemove=null;

　　　　}

　　　　if(oDiv.setCapture){

　　　　　oDiv.setCapture();

　　　　}

　　　　return false;

　　}

}

</script>

Javascript：实操---拖拽(完整版),古老的榕树,5-wow.com