PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > JavaScript教程 > 正文

    js拖拽div示例代码分享

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:这篇文章主要介绍了js实现可拖动DIV的方法,有需要的朋友可以参考一下。
    这篇文章主要介绍了js实现可拖动DIV的方法,有需要的朋友可以参考一下。
     
    复制代码 代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    var MoveDiv = function(){};
    MoveDiv.Move=function(id)
    {
        var o=document.getElementById(id);

        o.onselectstart = function()
        {
            return(false);
        };

        o.onmousedown = function(e) {
            e = e||window.event;
            var x=e.layerX||e.offsetX;
            var y=e.layerY||e.offsetY;
            x=x-document.body.scrollLeft;
            y=y-document.body.scrollTop;
            document.onmousemove = function(e)
            {
                e=e||window.event;
                o.style.left=(e.clientX-x)+"px";
                o.style.top=(e.clientY-y)+"px";
            };

            document.onmouseup=function()
            {
                document.onmousemove=null;
            };
        };
    }
    </script>
    </head>

    <body>
    <div id="ok" onmousedown="MoveDiv.Move('ok')" style="border:#FF0000 1px solid; height:100px; width:100px; position:absolute">
      
    </div>
    </body>
    </html>

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-69-1277-1.html
    相关热词搜索: js拖动div