JavaScript拖动和捕捉到浏览器窗口

时间:2013-03-24 21:38:59

标签: javascript

我想修改下面的函数,不仅可以有浏览器窗口的拖动边界,而且当拖动距离边界15px时也可以“捕捉”它。

Zopim在聊天小部件中有这个,请参阅:http://zopim.com (单击右下角的聊天图标,开始将小部件拖动到浏览器窗口的末尾)

我目前的职能是:http://jsfiddle.net/N6A4q/

代码:

function enableDragging(ele) {

    var dragging = dragging || false,
        x, y, Ox, Oy,
        current;

    enableDragging.z = enableDragging.z || 1;
    var grabber = ele;
    grabber.onmousedown = function (ev) {
        ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        current = target.parentNode;
        dragging = true;
        x = ev.clientX ;
        y = ev.clientY ;
        Ox = current.offsetLeft;
        Oy = current.offsetTop;
        current.style.zIndex = ++enableDragging.z;
        // cached value
        var viewportWidth = viewport().width;
        var viewportHeight = viewport().height;

        document.onmousemove = function (ev) {
            ev = ev || window.event;

            if (dragging == true) {
                var Sx = parseFloat(ev.clientX) - x + Ox;
                var Sy = parseFloat(ev.clientY) - y + Oy;
                current.style.left = Math.min(Math.max(Sx, Math.min(viewportWidth - Sx, 0)), viewportWidth - current.offsetWidth) + "px";
                current.style.top = Math.min(Math.max(Sy, Math.min(viewportHeight - Sy, 0)), viewportHeight - current.offsetHeight) + "px";
            }
        }

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

        document.onmouseup = function (ev) {
            ev = ev || window.event;
            dragging && (dragging = false);
            if (ev.preventDefault) {
                ev.preventDefault();
            }
        }

        document.body.style.MozUserSelect = "none";
        document.body.style.cursor = "default";

        return false;
    };
}

function viewport() {
    var e = window
    , a = 'inner';
    if ( !( 'innerWidth' in window ) ) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
} 

我怎样才能以同样的方式使这个窗口的边界突然移动?

有什么想法吗?

0 个答案:

没有答案