谁能给我个网页上拖放DIV的代码

我自己写的，你可以参考一下，其中里边用了一些我自己写的方法，你可自己改写一下function DragBase(){};//  eventElement 这个是接受鼠标按下事件的对象
//  moveElement 是跟随鼠标移动的对象
//  property 是用户传入的相关参数
function DragBase.init(eventElement,moveElement,property)
{
    //  --------------------  下面为本类的属性  --------------------  
    
    var parent = false;         //  移动所在的区域对象
    var dragStart = false;      //  按下时的处理方法
    var drag = false;           //  移动时的处理方法
    var dragEnd = false;        //  鼠标谈起的处理方法
    
    var srcRect = false;        //  记录对象开始移动时所在的Rect
    var srcMousePoint = false;  //  记录鼠标按下的位置
    var isDragging = false;     //  是否正在进行拖拽的状态值
    
    var parentRect = false;     //  记录父对象的Rect
    
    //  --------------------  下面为本类的方法  --------------------  
    
    //  初始化方法
    var init = function()
    {
        if(property)
        {
            if(property.parent) parent = property.parent;
            if(property.dragStart) dragStart = property.dragStart;
            if(property.drag) drag = property.drag;
            if(property.dragEnd) dragEnd = property.dragEnd;
        }
        
        //  绑定开始移动事件
        eventElement.addEvent("onmousedown",mouseDownFun);
    };
    
    //  开始移动时的初始化方法
    var dragInit = function(e)
    {
        //  记录移动对象现在的位置
        srcRect = Dom.getOffsetRect(moveElement);
        
        //  如果有父对象，那就取得父对象现在的位置
        if(parent) parentRect = Dom.getOffsetRect(parent);
        
        //  记录鼠标按下的位置
        srcMousePoint = MyEvent.getScreenXY(e);
        
        //  绑定移动事件
        document.addEvent("onmousemove",mouseMoveFun);
        document.addEvent("onmouseup",mouseUpFun);
        
        //  设定捕捉
        moveElement.setCapture();
        
        //  设置状态
        isDragging = true;
        
        //  如果有开始移动的方法，那就调用
        if(dragStart) dragStart();
    };
    
    //  正在移动的处理方法
    var dragging = function(e)
    {
        //  取得现在的鼠标位置
        var mouseNow = MyEvent.getScreenXY(e);
        
        //  计算新的位置
        var ox = mouseNow.x - srcMousePoint.x;
        var oy = mouseNow.y - srcMousePoint.y;
        var x = srcRect.left + ox;
        var y = srcRect.top + oy;
        
        //  如果有父对象，那就验证新位置是否正确
        if(parentRect)
        {
            if(x < parentRect.left) x = parentRect.left;
            if((x + srcRect.width) > parentRect.right) x = parentRect.right - srcRect.width;
            if(y < parentRect.top) y = parentRect.top;
            if((y + srcRect.height) > parentRect.bottom) y = parentRect.bottom - srcRect.height;
        }
        
        //  设置新位置
        Dom.setXY(moveElement,x,y);
        
        //  如果有开始移动的方法，那就调用
        if(drag) drag();
    };  
    
    //  结束移动时的清除方法
    var dragRelease = function(e)
    {
        //  清空父对象的Rect
        parentRect = false;
        
        //  解除对鼠标的绑定
        document.removeEvent("onmousemove",mouseMoveFun);
        document.removeEvent("onmouseup",mouseUpFun);
        
        //  解除捕捉
        moveElement.releaseCapture();
        
        //  设置状态
        isDragging = false;
        
        //  如果有结束移动的方法，那就调用
        if(dragEnd) dragEnd();
    };
    
    //  鼠标按下时的处理方法
    var mouseDownFun = function(e)
    {
        //  判断现在的状态而判断是否进行操作
        if(isDragging)
        {
            dragRelease(e);
        }
        else
        {
            dragInit(e);
        }
    };
    
    //  鼠标移动式的处理方法
    var mouseMoveFun = function(e)
    {
        if(isDragging)
        {
            dragging(e);
        }
        else
        {
            dragRelease(e);
        }
    };
    
    //  鼠标弹起的处理方法
    var mouseUpFun = function(e)
    {
        dragRelease(e);
    };
    
    //  --------------------  下面为本类的初始化方法  --------------------  
    init();
}

解决方案 »

  1.   

    这个...不用这么麻烦吧.<html>
    <script>
    var moveFlag = false ;
    var justX ;
    var justY ;
    function Load()
    {
    document.body.attachEvent( "onmousedown" , bDown ) ;
    document.body.attachEvent( "onmouseup" , bUp ) ;
    document.body.attachEvent( "onmousemove" , bMove ) ;
    }function bDown()
    {
    if( event.srcElement.getAttribute( "dragFlag" ) != null )
    {
    moveFlag = true ;
    }
    }
    function bUp()
    {
    moveFlag = false
    }
    function bMove()
    {
    if( moveFlag )
    {

    var difX = event.x - justX ;
    var difY = event.y - justY ;
    theDiv.style.top = parseInt( theDiv.style.top ) + difY ;
    theDiv.style.left = parseInt( theDiv.style.left ) + difX ;
    }
    justX = event.x ;
    justY = event.y ;
    }
    </script>
    <body onload="Load()">
    <div id="theDiv" dragFlag=true style="position:absolute;left:168px;top:40px;width:110px;height:150px;z-index:100;border: 1px solid #000000;"></div>
    </body>
    </html>
      

  2.   

    楼上两位的都比较麻烦，看我的：
    <script language="JavaScript">
    var dragapproved=false;
    var obj,x,y;

    function move()
    { if (event.button==1&&dragapproved)
    { obj.style.pixelLeft=temp1+event.clientX-x;
    obj.style.pixelTop=temp2+event.clientY-y;
    return false;
    }
    }

    function drags()
    { if (!document.all) return ;
    if (event.srcElement.className=="drag")
    { dragapproved=true;
    obj=event.srcElement;
    temp1=obj.style.pixelLeft;
    temp2=obj.style.pixelTop;
    x=event.clientX;
    y=event.clientY;

    document.onmousemove=move;
    }
    }

    document.onmousedown=drags;
    document.onmouseup=new Function("dragapproved=false");
    </script>
    </head><body>
    <img src="images/draw.jpg" class="drag" width="200" height="119">
    </body>
    我这是拖动图片的，楼主稍加改动即可
      

  3.   

    document.body.attachEvent( "onmousedown" , bDown ) ;
    document.body.attachEvent( "onmouseup" , bUp ) ;
    document.body.attachEvent( "onmousemove" , bMove ) ;
    -------------------------------
    楼上的兄弟,偶这不是麻烦,是为了避免覆盖楼主原先定义的这三个事件.
      

  4.   

    偶又改了下,这样无论页面上有多少个DIV都可以轻松拖动了,呵呵.<html>
    <script>
    var moveObj = null ;
    var justX ;
    var justY ;
    function Load()
    {
    document.body.attachEvent( "onmousedown" , bDown ) ;
    document.body.attachEvent( "onmouseup" , bUp ) ;
    document.body.attachEvent( "onmousemove" , bMove ) ;
    }function bDown()
    {
    if( event.srcElement.getAttribute( "dragFlag" ) != null )
    {
    moveObj = event.srcElement ;
    }
    }
    function bUp()
    {
    moveObj = null ;
    }
    function bMove()
    {
    if( moveObj != null )
    {

    var difX = event.x - justX ;
    var difY = event.y - justY ;
    moveObj.style.top = parseInt( moveObj.style.top ) + difY ;
    moveObj.style.left = parseInt( moveObj.style.left ) + difX ;
    }
    justX = event.x ;
    justY = event.y ;
    }
    </script>
    <body onload="Load()">
    <div dragFlag=true style="position:absolute;left:168px;top:40px;width:110px;height:150px;z-index:100;border: 1px solid #000000;"></div>
    <div dragFlag=true style="position:absolute;left:68px;top:240px;width:110px;height:150px;z-index:101;border: 1px solid #000000;"></div>
    </body>
    </html>