javascirpt div 移动应用

最新推荐文章于 2024-06-27 15:30:28 发布

转载最新推荐文章于 2024-06-27 15:30:28 发布 · 111 阅读

本文介绍了一种使用JavaScript实现的可由鼠标拖动的DIV元素方法。通过计算鼠标点击位置与DIV左上角的偏移量，在鼠标移动时更新DIV的位置，从而实现拖动效果。

可以用鼠标拖动的DIV

2009-02-05 18:07

可以用鼠标拖动的DIV

测试可动div

var offset_x;
        var offset_y;
        function Milan_StartMove(oEvent)
        {
            var whichButton;
            if(document.all&&oEvent.button==1) whichButton=true;
            else { if(oEvent.button==0)whichButton=true;}
            if(whichButton)
            {
                var Div=document.getElementById("oDiv");
                offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft);
                offset_y=parseInt(oEvent.clientY-oDiv.offsetTop);
                document.documentElement.onmousemove=function(mEvent)
                {
                    var eEvent;
                    if(document.all) eEvent=event;
                    else{eEvent=mEvent;}
                    var Div=document.getElementById("oDiv");
                    var x=eEvent.clientX-offset_x;
                    var y=eEvent.clientY-offset_y;
                    oDiv.style.left=(x)+"px";
                    oDiv.style.top=(y)+"px";
                }
            }
        }
function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; }

style="cursor:move;position:absolute;width:100px;height:60px;border:1px solid

silver;left:100px;top:100px;z-index:9999;">

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/17140602/viewspace-557851/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/17140602/viewspace-557851/