坚持爬的蜗牛

能见到阳光

博客园 首页 联系 订阅 管理
实际上就是用了三个事件函数
1.onmousedown 2.onmousemove 3.onmouseup
利用这三个事件函数就可以了,代码如下:
<script type="text/javascript">
        
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";
            
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;
        }

    
</script>

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

注意事项:
1.要拖动的div一定要把position属性设置absolute;否则按流布局的话无法实现拖动。
2.一定要设置top和left的初始值,否则当onmousemove事件触发时就会报错!

存在问题:
1.只能在IE里用,没有实现跨浏览器。
2.在拖动过程中如果鼠标快速移动,就会移出到被拖动层的外面,这时如果松开鼠标,没有清空onmousemove事件,所以当鼠标指向时就会跟着鼠标移动。


摘自:http://www.cnblogs.com/interboy/archive/2007/05/02/734642.html
posted on 2007-05-08 10:45  TankerLog  阅读(215)  评论(0)    收藏  举报