六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

div+css实现网页模块或栏目拖动(即拖拽效果)

Admin | 2007-11-10 11:40:49 | ReadNums | 7440 | 标签 网页制作 | 打印本页
     

<script type="text/javascript" language="javascript">
    //为Number增加一个属性,判断当前数据类型是否是数字
    Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

    //全局变量
    var iMouseDown=false;
    var dragObject=null;

    //获得鼠标的偏移量(对象2-对象1)
    function getMouseOffset(target,ev)
    {
        ev=ev||window.event;
        var docPos=getPosition(target);
        var mousePos=mouseCoords(ev);
        return {x:mousePos.x-docPos.x,y:mousePos.y-docPos.y};
    }

    //获得事件发生的实际位置----------------------对象1
    function getPosition(e)
    {
        var left=0;
        var top=0;
        //相对位置累加得到实际位置
        while(e.offsetParent)
        {
            left+=e.offsetLeft+(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
            top+=e.offsetTop+(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
            e=e.offsetParent;
        }
        left+=e.offsetLeft+(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
        top+=e.offsetTop+(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
        return {x:left,y:top};
    }
    //获得发生事件鼠标的位置----------------------对象2
    function mouseCoords(ev)
    {
        if(ev.pageX||ev.pageY)
        {
            return {x:ev.pageX,y:ev.pageY};
        }
        return {x:ev.clientX+document.body.scrollLeft-document.body.clientLeft,y:ev.clientY+document.body.scrollTop-document.body.clientTop};
    }


    //定义可以拖拽的对象
    function makeDragable(item)
    {
        if(!item) return;
        //为可拖拽对象定义一个onmousedown事件的方法
        ev=window.event;
        item.onmousedown=function(ev)
        {
            dragObject=this;
            mouseOffset=getMouseOffset(this,ev);
            return false;
        }
    }

    //定义鼠标点下所调用的方法
    function mouseDown(ev)
    {
        ev=ev||window.event;
       
        var target=ev.target||ev.srcElement;
        if(target.onmousedown||target.getAttribute('DragObj'))
        {
            return false;
        }   
    }
    //鼠标抬起后释放对象
    function mouseUp(ev)
    {
        dragObject = null;
        //onmouseup事件触发时说明鼠标已经松开,所以设置down变量值为false
        iMouseDown = false;
    }

    //鼠标移动
    function mouseMove(ev)
    {
        ev=ev||window.event;
        var target   = ev.target || ev.srcElement;
        var mousePos = mouseCoords(ev);
        if(dragObject)
        {
            if(dragObject.style)
            {
                //移动对象
                dragObject.style.left=mousePos.x - mouseOffset.x;
                dragObject.style.top= mousePos.y - mouseOffset.y;
            }
        }
        //lMouseState = iMouseDown;
        if(dragObject) return false;
    }
    document.onmousedown=mouseDown;
    document.onmousemove=mouseMove;
    document.onmouseup=mouseUp;


    function moveImg()
    {
        var img1=document.getElementById('img1');
        makeDragable(img1);
    }
    </script>
</head>
<body onload="moveImg()">
    <form id="form1" runat="server">
    <div>
    <img src="a.jpg" alt="" id="img1" style="position:absolute;left:0px;top:0px;" />
    </div>
    </form>
</body>
</html>


问题未解决:在线咨询我要在线咨询问题

香港挂牌资料最早更新

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日