jquery浮动层拖动插件

  具体使用方法参考代码里面的注释

$.cancelEvent = function (e) {//阻止事件冒泡
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
};
$.Drag = function () {//jquery层拖动插件
    var btn = document.all ? 1 : 0//判断鼠标哪个按键点击的,IE和W3c浏览器的button值不一样,只有左键按下拖动才有效
    , a, o, pos;
    function dragStart(e) {//移动对象鼠标按下事件
        if (e.button != btn) return;//按下鼠标左键
        if (o) $(document).unbind({ mousemove: dragMove, mouseup: dragEnd });
        o = $(this.parent || this);//获取拖动的整体
        if (btn == 1) o.get(0).setCapture(); //设置IE的鼠标捕获
        //设置浮动层的初始位置数据
        pos = { ox: (e.pageX || (e.clientX + $(document).scrollLeft())) - parseInt(o.css('left')), oy: (e.pageY || (e.clientY + $(document).scrollTop())) - parseInt(o.css('top')) };
        $(document).bind({ mousemove: dragMove, mouseup: dragEnd }); //绑定页面的鼠标移动和鼠标弹起事件
        $.cancelEvent(e);
    }
    function dragMove(e) {//页面鼠标移动事件
        //设置层的位置
        o.css({ top: (e.pageY || (e.clientY + $(document).scrollTop())) - parseInt(pos.oy), left: (e.pageX || (e.clientX + $(document).scrollLeft())) - parseInt(pos.ox) });
        $.cancelEvent(e);
    }
    function dragEnd(e) {//页面鼠标弹起事件
        if (e.button != btn) return;
        $(document).unbind({ mousemove: dragMove, mouseup: dragEnd });
        if (btn == 1) o.get(0).releaseCapture(); //释放IE的鼠标捕获
        o = null; 
        $.cancelEvent(e);
        if ($.Drag.Resize) $.Drag.Resize(); //层移动结束后要执行的事件,如果设置了此事件。增加此代码主要是为了针对“jquery+flash显示图片实时加载进度插件”插件而设置的,设置lightbox大小
    }
    for (var i = 0, j = arguments.length; i < j; i++) {//绑定移动层鼠标按下事件
        //arguments[i]参数解释:如果参数为数组['触发拖动的对象','要拖动的整体,参数“触发拖点的对象”包含在整体中'],或者不为数组时,这个对象就为拖动的整体
        a = arguments[i];
        if (!a.push) a = [a];//不为数组,则将参数转换为数组
        o = $(typeof (a[0]) == 'string' ? '#' + a[0] : a[0]).get(0);//获取对象,如果传递ID怎需要进行转换
        if (!o) continue;//对象不存在
        if (a[1]) o.parent = $(typeof (a[1]) == 'string' ? '#' + a[1] : a[1]).get(0);//第一个对象不为拖动整体,则设置拖动对象的parent属性为拖动整体
        $(o).mousedown(dragStart);//绑定拖动对象的鼠标按下事件
    }
    a = null;
};

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:jquery浮动层拖动插件

评论(0)Web开发网
阅读(138)喜欢(1)JavaScript/Ajax开发技巧