jQuery模仿win拖动插件

来源:互联网 发布:appletv如何安装软件 编辑:程序博客网 时间:2024/04/30 05:25
这个是插件是在以前的插件的基础上修改的,主要是在IE6下的时候,如果被拖动的区域内容很多的时候,有select就有点托屏,就该成win下没有主题的拖动样式,下边是源码:
(function($){
    $.fn.jqDrag = function(h,bf,ed){
        return i(this, h, 'd',bf,ed);
    };
    $.fn.jqResize = function(h){
        return i(this, h, 'r');
    };
    $.jqDnR = {
        dnr: {},
        e: 0,
        ed:function(){},
        drag: function(v){
            if (M.k == 'd') {
                var l = M.X + v.pageX - M.pX;
                var t = M.Y + v.pageY - M.pY;
                if (l < 0) {
                    l = 0;
                }
                else
                    if (l > (B.W - M.W)) {
                        l = B.W - M.W;
                    }
                if (t < 0) {
                    t = 0;
                }
                else
                    if (t > (B.H - M.H)) {
                        t = B.H - M.H;
                    }
                E.css({
                    left: l,
                    top: t
                });
            }
            else {
                E.css({
                    width: Math.max(v.pageX - M.pX + M.W, 0),
                    height: Math.max(v.pageY - M.pY + M.H, 0)
                });
            }
            return false;
        },
        stop: function(){
            ED(dt);
            dt.css({
                opacity: M.o,
                top:E.offset().top,
                left:E.offset().left
            });
            E.remove();
            $().unbind('mousemove', J.drag).unbind('mouseup', J.stop);
        }
    };
    var B = {
        W: $(window).width(),
        H: $(window).height()
    };
    var J = $.jqDnR;
    var M = J.dnr;
    var E;
    var dt;
    var ED= J.ed;
    var i = function(e, h, k,bf,ed){
        if(bf==undefined){
            bf=function(){};
        }
        if(ed==undefined){
            ed=function(){};
        }
        ED = ed;
        return e.each(function(){
            h = (h) ? $(h,e) : e;
            h.bind('mousedown', {
                e: e,
                k: k
            }, function(v){
                var d = v.data, p = {};
                dt = d.e;
                bf(dt);                           
                E=$('<div id="drag_div"></div>').appendTo(document.body)
                .css({
                    position:'absolute',
                    top:dt.offset().top+'px',
                    left:dt.offset().left+'px',
                    width:dt.width()+'px',
                    height:dt.height()+'px',
                    border:'#DDD 3px solid'
                });
                // attempt utilization of dimensions plugin to fix IE issues
                if (E.css('position') != 'relative') {
                    try {
                        E.position(p);
                    }
                    catch (e) {
                    }
                }
                M = {
                    X: p.left || f('left') || 0,
                    Y: p.top || f('top') || 0,
                    W: f('width') || E[0].scrollWidth || 0,
                    H: f('height') || E[0].scrollHeight || 0,
                    pX: v.pageX,
                    pY: v.pageY,
                    k: d.k,
                    o: E.css('opacity')
                };
                E.css({
                    opacity: 1
                });
                $().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
                return false;
            });
        });
    }
    var f = function(k){
        return parseInt(E.css(k)) || false;
    };
})(jQuery);
调用方式:$('#test').jqDrag($('#test1'));
演示地址:http://www.cssrain.cn/demo/win_drag/
原创粉丝点击