JS拖拽

zwt2001267

浏览: 435996 次
性别:
来自: 北京

最近访客更多访客>>

star84064686

503918044

xx5333

CharlesLibby

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

<!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>
    <title></title>
    <script type="text/javascript">        
        var Common = {
            getEvent: function() {//ie/ff
                if (document.all) {
                    return window.event;
                }
                func = getEvent.caller;
                while (func != null) {
                    var arg0 = func.arguments[0];
                    if (arg0) {
                        if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
                            return arg0;
                        }
                    }
                    func = func.caller;
                }
                return null;
            },
            getMousePos: function(ev) {
                if (!ev) {
                    ev = this.getEvent();
                }
                if (ev.pageX || ev.pageY) {
                    return {
                        x: ev.pageX,
                        y: ev.pageY
                    };
                }

                if (document.documentElement && document.documentElement.scrollTop) {
                    return {
                        x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
                        y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
                    };
                }
                else if (document.body) {
                    return {
                        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                        y: ev.clientY + document.body.scrollTop - document.body.clientTop
                    };
                }
            },            
            getItself: function(id) {
                return "string" == typeof id ? document.getElementById(id) : id;
            },
            getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth, h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight },
            isIE: document.all ? true : false,
            setOuterHtml: function(obj, html) {
                var Objrange = document.createRange();
                obj.innerHTML = html;
                Objrange.selectNodeContents(obj);
                var frag = Objrange.extractContents();
                obj.parentNode.insertBefore(frag, obj);
                obj.parentNode.removeChild(obj);
            }
        }
        
        ///------------------------------------------------------------------------------------------------------
        var Class = {
            create: function() {
                return function() { this.init.apply(this, arguments); }
            }
        }
        var Drag = Class.create();
        Drag.prototype = {
            init: function(titleBar, dragDiv, Options) {
                //设置点击是否透明，默认不透明
                titleBar = Common.getItself(titleBar);
                dragDiv = Common.getItself(dragDiv);
                this.dragArea = { maxLeft: 0, maxRight: Common.getViewportSize.w - dragDiv.offsetWidth - 2, maxTop: 0, maxBottom: Common.getViewportSize.h - dragDiv.offsetHeight - 2 };
                if (Options) {
                    this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100;                    
                    this.keepOrigin = Options.keepOrigin ? ((Options.keepOrigin == true || Options.keepOrigin == false) ? Options.keepOrigin : false) : false;
                    if (this.keepOrigin) { this.opacity = 50; }
                    if (Options.area) {
                        if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left };
                        if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right };
                        if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top };
                        if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom };
                    }
                }
                else {
                    this.opacity = 100, this.keepOrigin = false;
                }
                this.originDragDiv = null;
                this.tmpX = 0;
                this.tmpY = 0;
                this.moveable = false;

                var dragObj = this;

                titleBar.onmousedown = function(e) {
                    var ev = e || window.event || Common.getEvent();
                    //只允许通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0
                    if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {
                    }
                    else {
                        return false;
                    }

                    if (dragObj.keepOrigin) {
                        dragObj.originDragDiv = document.createElement("div");
                        dragObj.originDragDiv.style.cssText = dragDiv.style.cssText;
                        dragObj.originDragDiv.style.width = dragDiv.offsetWidth;
                        dragObj.originDragDiv.style.height = dragDiv.offsetHeight;
                        dragObj.originDragDiv.innerHTML = dragDiv.innerHTML;
                        dragDiv.parentNode.appendChild(dragObj.originDragDiv);
                    }

                    dragObj.moveable = true;
                    dragDiv.style.zIndex = dragObj.GetZindex() + 1;
                    var downPos = Common.getMousePos(ev);
                    dragObj.tmpX = downPos.x - dragDiv.offsetLeft;
                    dragObj.tmpY = downPos.y - dragDiv.offsetTop;

                    titleBar.style.cursor = "move";
                    if (Common.isIE) {
                        dragDiv.setCapture();
                    } else {
                        window.captureEvents(Event.MOUSEMOVE);
                    }

                    dragObj.SetOpacity(dragDiv, dragObj.opacity);

                    //FireFox 去除容器内拖拽图片问题
                    if (ev.preventDefault) {
                        ev.preventDefault();
                        ev.stopPropagation();
                    }

                    document.onmousemove = function(e) {
                        if (dragObj.moveable) {
                            var ev = e || window.event || Common.getEvent();
                            //IE 去除容器内拖拽图片问题
                            if (document.all) //IE
                            {
                                ev.returnValue = false;
                            }

                            var movePos = Common.getMousePos(ev);
                            dragDiv.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) + "px";
                            dragDiv.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) + "px";

                        }
                    };

                    document.onmouseup = function() {
                        if (dragObj.keepOrigin) {
                            if (Common.isIE) {
                                dragObj.originDragDiv.outerHTML = "";
                            }
                            else {
                                Common.setOuterHtml(dragObj.originDragDiv, "");
                            }
                        }
                        if (dragObj.moveable) {
                            if (Common.isIE) {
                                dragDiv.releaseCapture();
                            }
                            else {
                                window.releaseEvents(Event.MOUSEMOVE);
                            }
                            dragObj.SetOpacity(dragDiv, 100);
                            titleBar.style.cursor = "default";
                            dragObj.moveable = false;
                            dragObj.tmpX = 0;
                            dragObj.tmpY = 0;
                        }
                    };
                }
            },
            SetOpacity: function(dragDiv, n) {
                if (Common.isIE) {
                    dragDiv.filters.alpha.opacity = n;
                }
                else {
                    dragDiv.style.opacity = n / 100;
                }

            },
            GetZindex: function() {
                var maxZindex = 0;
                var divs = document.getElementsByTagName("div");
                for (z = 0; z < divs.length; z++) {
                    maxZindex = Math.max(maxZindex, divs[z].style.zIndex);
                }
                return maxZindex;
            }
        }

        window.onload = function() {
            new Drag("dragDiv", "dragDiv", { opacity: 100, keepOrigin: true }); //, area: { left: 50, right: 500, top: 100, bottom: 400}
        }
        　　

    </script>
    
</head>
<body>
    <div id="dragDiv" style="position:absolute; background-color:#FFFFFF;border:solid 1px #849BCA;width:200px;left:10px;top:10px;filter:alpha(opacity=100);opacity:1;">
        <table cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse; ">
            <tr id="titleBar" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;">
                <th align="left" unselectable="on" >Title</th>
            </tr>
            <tr style="height:130px;padding:3px;" align="left" valign="top" unselectable="on">
                <td><img src="http://images.cnblogs.com/logo_small.gif" alt="pic for drag"  /> Content...</td> <!---->
            </tr>
        </table>
    </div>   
    <div style="position:absolute; font-family:Tahoma;border:solid 1px #849BCA; background-color:#AAAAAA;width:200px;height:100px;left:210px;top:210px;filter:alpha(opacity=100);opacity:1; z-index:999">Are you able to cover me?</div>    
</body>
</html>

对Drag的使用：在window.onload中，必填参数是titleBar和dragDiv，后者是要拖拽的容器，前者是拖拽容器的可拖拽部位，譬如经常遇到的通过标题栏拖动整个DIV，则titleBar即为改标题栏。而{ opacity: 100, keepOrigin: true , area: { left: 50, right: 500, top: 100, bottom: 400}} 是可选参数，用于扩展功能，opacity设置透明度，keepOrigin设置拖拽过程中是否保留原来拖拽容器，area设置拖拽范围。

拖拽的基本原理：当mousedown时记下鼠标点击位置离拖拽容器左边沿的距离和上边沿的距离，即tmpX,tmpY；mousemove时通过定位拖拽容器的style.left/style.top，使拖拽容器进行移动，定位到哪里则由刚刚的tmpX/tmpY和当前鼠标所在位置计算得出；mouseup时，结束移动。
“var dragObj = this;” 这句是为了在mousedown/mouseup/mousemove事件里对Drag对象的相关变量进行引用。因为在mousedown/mouseup/mousemove里的this是window.
当拖拽速度太快导致鼠标移出拖拽容器，而拖拽容器位置未变，用document.mousemove代替titleBar.mousemove即可。
设置拖拽容器可拖拽的范围，若未设置，则默认为当前窗口可视范围。Note：在设置范围的时候使用Math.max/min来处理，而不是用If语句判断，用后者的话会导致快速拖拽时未达到容许范围边沿即停止的状况。
当拖拽过程中，可设置是否保留原来拖拽容器，当拖拽结束，隐藏原来容器，默认不保留。
当拖拽时，可设置拖拽的容器是否透明及透明度多少，默认不透明。但若拖拽过程中设置保留原来拖拽容器，即keepOrigin: true，则设置透明度为50%。
使右键、鼠标中键等不能拖动，仅左键单击可以拖动。Note：IE鼠标左键为event.Button=1 FireFox为event.Button=0.
解决如果点击在图片上无法拖拽的问题：非常杯具的是IE通过ev.cancelBubble=true;ev.returnValue = false;来防止图片的事件，注意是放在document.onmousemove中，而FireFox通过ev.preventDefault();ev.stopPropagation(); 但是是放在titleBar的mousedown事件中。
有一种情况，当浏览器窗口不是最大化的时候，你希望当鼠标在浏览器外移动时，浏览器里的拖拽容器仍然移动，这时就要使用鼠标事件捕获，IE中相应的是dragDiv.setCapture();与dragDiv.releaseCapture(); FF中是window.captureEvents(Event.MOUSEMOVE);与window.releaseEvents(Event.MOUSEMOVE) 。
确保每次拖拽时拖拽容器的zindex都不会被其他块元素覆盖。

drag.rar (2.7 KB)
下载次数: 4

分享到：

JS拖拽 | DIV如何双击关闭

2011-12-19 12:23
浏览 1237
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS拖拽

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS拖拽

评论

发表评论

相关推荐

JS拖拽

DIV如何双击关闭

最近访客更多访客>>