草本枝稼

html 简单 div 拖动
解决:   div的 onclike ( this )  得到选择 
            由 window.event 得到 鼠标 x y 
            由 this.style.top/left 改变 div 位置 


        
var x,y;
        
function mousedown(obj)
        {
            obj.onmousemove 
= mousemove;
            obj.onmouseup 
= mouseup;
            
            oEvent 
= window.event ? window.event : event;
            x 
= oEvent.clientX;
            y 
= oEvent.clientY;
        }
        
function mousemove()
        {
            oEvent 
= window.event ? window.event : event;
            
var _top = oEvent.clientY - y + parseInt(this.style.top) + "px"; // oEvent.clientY - y  为div 上 移动的位置 再反映到                                                                                //parseInt(this.style.top)
            var _left = oEvent.clientX - x + parseInt(this.style.left) +"px";
            
this.style.top = _top;
            
this.style.left = _left;
            x 
=  oEvent.clientX;
            y 
=  oEvent.clientY
        }
        
function mouseup()
        {
            
this.onmousemove = null;
            
this.onmouseup = null;
        }


页面:
<div id="div1" style="width: 100px; height: 100px; top:10px; left:15px; cursor:move; background-color:Blue; position:absolute;" onmousedown="mousedown(this)" > </div>

posted on 2009-08-14 18:35  林声歌  阅读(201)  评论(0编辑  收藏  举报