使用CSS和jQuery的可拖动动态表格/图表

Question

我想创建动态网格，就像3DS Max的顶部/左侧/前视图一样。 它应该是可拖动的并且是无限的。

这是我到目前为止所做的

self.grid = function(size){

        var sw = self.getScrollBarWidth() + 1,
        ow = $(window).width() * 2;
        $(".editor .gridbox").css({ right: -sw + 'px', bottom: -sw + 'px' });
        $(".gridbox .grid").css({
            width: ow + 'px',
            height: ow + 'px'
        });

        var w = Math.floor(editor.width()/size),
        h = Math.floor(editor.height()/size);

        for(var i = 0; i < ow / size; i++){
            for(var n = 0; n < ow / size; n++){
                var s = size,
                c = $('<div class="c" style="width:'+s+'px;height:'+s+'px;"></div>');
                for(var ii = 0; ii < 8; ii++){
                    for(var nn = 0; nn < 8; nn++){
                        ss = (size / 8) - 1;
                        c.append('<div class="o" style="width:'+ss+'px;height:'+ss+'px;"></div>');
                    }   
                }           
                editor.find(".grid").append(c);             
            }
        }
    };

这是拖动的东西...

$(".editor .gridbox, .editor .gridbox .grid").on("mousewheel DOMMouseScroll", function(e){ e.preventDefault(); });
        $(".editor .gridbox").on({
            'mousedown' : function(e){
                var $drag = $(this).addClass("draggable");
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;              
                $drag.parents().on('mousemove', function(e){
                    var _top = e.pageY + pos_y - drg_h,
                    _left = e.pageX + pos_x - drg_w;
                    if(_top <= 290){
                        //generate more grid
                    }
                    $(".draggable").offset({
                        top: _top,
                        left: _left
                    }).on("mouseup", function(){
                        $(this).removeClass('draggable');
                    });;
                });
                e.preventDefault();
            },          
            'mouseup' : function(){
                $(this).removeClass("draggable");
            }
        });

Grid With CSS

现在，我无法将自己想念或想做的事情无限化。