div鼠标拖动

网上找的一个觉得写的不错的div鼠标拖动效果

<html>
    <head>
    <script>
        // JavaScript Document
        var key = null;
        var tablewidth, tableheight, tabletop, tableleft, searchwidth, searchheight, searchtop, searchleft;
        //初始化，保存div初始值
        function init(){
            var tablediv = document.getElementById("table");
            var searchdiv = document.getElementById("search");

            tablewidth = tablediv.style.width;
            tableheight = tablediv.style.height;
            tabletop = tablediv.style.top;
            tableleft = tablediv.style.left;

            searchwidth = searchdiv.style.width;
            searchheight = searchdiv.style.height;
            searchtop = searchdiv.style.top;
            searchleft = searchdiv.style.left;
        }

        //自动适应大小函数
        function setsize(){
            var divgis = document.getElementById("gis");

            if ((document.body) && (document.body.clientWidth))
                divgis.style.width = document.body.clientWidth;
            if ((document.body) && (document.body.clientHeight))
                divgis.style.height = document.body.clientHeight;

            if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight) {
                divgis.style.height = document.documentElement.clientHeight;
                divgis.style.width = document.documentElement.clientWidth;
            }
        }

        //实现可拖动div效果
        function $(id){
            return document.getElementById(id);
        };
        function drag(element, e){
            var btnid = element.id + "ding";
            if (document.getElementById(btnid).value == "解除")
                return false;

            e = e || event;
            setFocus(element.id);
            if (document.addEventListener) {
                document.addEventListener("mousemove", startDrag, true);
                document.addEventListener("mouseup", stopDrag, true);
            }
            else {
                document.onmousemove = startDrag;
                document.onmouseup = stopDrag;
            }
            var deltaX = e.clientX - parseInt(element.style.left);
            var deltaY = e.clientY - parseInt(element.style.top);
            function startDrag(e){
                e = e || event;
                element.style.left = e.clientX - deltaX + "px";
                element.style.top = e.clientY - deltaY + "px";
            };

            function stopDrag(){
                if (document.removeEventListener) {
                    document.removeEventListener("mousemove", startDrag, true);
                    document.removeEventListener("mouseup", stopDrag, true);
                }
                else {
                    document.onmousemove = "";
                    document.onmouseup = "";
                }

                var oDiv = document.getElementsByTagName("div");
            };

            return true;
        };

        function setFocus(elementId){
            var oDiv = document.getElementsByTagName("div");
            for (var i = 0; i < oDiv.length; i++) {
                if (oDiv[i].id == elementId) {
                    oDiv[i].style.zIndex = 20;
                }
                else {
                    oDiv[i].style.zIndex = 10;
                }
            }
        };
        //对其他div的操作
        function opendiv(id){
            document.getElementById(id).style.display = 'block';
        }

        function closediv(id){
            var a = document.getElementById(id);
            document.getElementById(id).style.display = 'none';
            if (id == 'table') {
                a.style.width = tablewidth;
                a.style.height = tableheight;
                a.style.top = tabletop;
                a.style.left = tableleft;
            }
            if (id == 'search') {
                a.style.width = searchwidth;
                a.style.height = searchheight;
                a.style.top = searchtop;
                a.style.left = searchleft;
            }
        }

        function smalldiv(e, id){
            var a = document.getElementById(id);
            if (a.style.display == 'none') {
                a.style.display = 'block';
                e.value = "最小";
            }
            else {
                a.style.display = 'none';
                e.value = "最大";
            }

        }

        //锚定函数，阻止拖动
        function closedrag(e, id){
            if (e.value == "锚定") {
                e.value = "解除";
            }
            else {
                e.value = "锚定";
            }
        }

        function guiwei(){
            var a = document.getElementById("table");
            a.style.width = tablewidth;
            a.style.height = tableheight;
            a.style.top = tabletop;
            a.style.left = tableleft;

            a = document.getElementById("search");
            a.style.width = searchwidth;
            a.style.height = searchheight;
            a.style.top = searchtop;
            a.style.left = searchleft;
        }

        setsize();
        window.onresize = setsize;
    </script>
    <body onLoad="init()">
        <div id="gis" style="overflow:auto;width:100%;height:100%; z-index:1">
            <img src="开发区.jpg" width="100%" height="100%"/>
            <div id="menu" style="width:50px; height:60px; position:absolute; top:50px; left:2px; z-index:22; border:solid;">
                <table width="100%" height="100%">
                    <tr>
                        <input type="button" value="div1" onClick="opendiv('table')"/>
                    </tr>
                    <tr>
                        <input type="button" value="div2" onClick="opendiv('search')"/>
                    </tr>
                    <tr>
                        <input type="button" value="归位" onClick="guiwei()"/>
                    </tr>
                </table>
            </div>
            <div id="table" style="width:200px; height:200px; position:absolute; top:20px; left:20px; z-index:2; display:block;" onMouseDown="return drag(this,event);">
                <div style="width:200px; height:20px; border:solid;">
                    <table width="100%" height="100%">
                        <tr>
                            <td>
                                <input type="button" value="最小" onClick="smalldiv(this,'tablebody')"/>
                            </td>
                            <td>
                                <input type="button" id="tableding" value="锚定" onClick="closedrag(this,'table')"/>
                            </td>
                            <td>
                                <input type="button" value="关闭" onClick="closediv('table')"/>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="tablebody" style="width:200px; height:180px; z-index:2; border:solid; display:block;">
                </div>
            </div>
            <div id="search" style="width:400px; height:400px; position:absolute; top:100px; left:100px; z-index:2; display:block;" onMouseDown="return drag(this,event);">
                <div style="width:400px; height:20px; border:solid;">
                    <table width="100%" height="100%">
                        <tr>
                            <td>
                                <input type="button" value="最小" onClick="smalldiv(this,'searchbody')"/>
                            </td>
                            <td>
                                <input type="button" id="searchding" value="锚定" onClick="closedrag(this,'search')"/>
                            </td>
                            <td>
                                <input type="button" value="关闭" onClick="closediv('search')"/>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="searchbody" style="width:400px; height:380px; border:solid; display:block;">
                </div>
            </div>
        </div>
    </body>
</html>

posted on 2009-12-29 01:39 RIVERSPIRIT 阅读(285) 评论(0) 收藏举报