我是 gridster 新手,我正在尝试调整小部件的大小。当我创建一个小部件时,我添加了一个

<span class="gs-resize-handle gs-resize-handle-both"></span>  

在每个

  • 内。我发现它被用在 gridster 网站上的一些小部件调整大小示例中。

    当我将鼠标悬停在跨度上时,我的鼠标变成了一只手,但是当我尝试拖动小部件的一 Angular 时,我只能移动小部件,而不能调整小部件的大小。

    这是我的匿名函数:

    $(function(){ //DOM Ready 
     
        gridster= $(".gridster ul").gridster({ 
            widget_margins: [4, 4], 
            widget_base_dimensions: [182, 75], 
            helper: 'clone', 
            resize: { 
                enable: true 
            } 
        }).data('gridster'); 
     
        gridster.add_widget('<li class="dragItem Header">Header<span class="gs-resize-handle gs-resize-handle-both"></span></li>'); 
        gridster.add_widget('<li class="dragItem Summary">Summary<span class="gs-resize-handle gs-resize-handle-both"></span></li>'); 
        gridster.add_widget('<li class="dragItem Image">Image<span class="gs-resize-handle gs-resize-handle-both"></span></li>'); 
        gridster.add_widget('<li class="dragItem Image">Image<span class="gs-resize-handle gs-resize-handle-both"></span></li>'); 
        gridster.add_widget('<li class="dragItem LF">LF<span class="gs-resize-handle gs-resize-handle-both"></span></li>'); 
        gridster.add_widget('<li class="dragItem RF">RF<span class="gs-resize-handle gs-resize-handle-both"></span></li>'); 
        gridster.add_widget('<li class="dragItem LB">LB<span class="gs-resize-handle gs-resize-handle-both"></span></li>'); 
        gridster.add_widget('<li class="dragItem RB">RB<span class="gs-resize-handle gs-resize-handle-both"></span></li>'); 
        gridster.add_widget('<li class="dragItem Footer">Footer<span class="gs-resize-handle gs-resize-handle-both"></span></li>'); 
     
    }); 
    

    我的问题是如何通过拖动小部件来调整它们的大小。

    http://jsfiddle.net/Ljqep1a2/

    请您参考如下方法:

    您在这里犯了一个小错误:

    enable: true 
    

    应该是

    enabled: true 
    


    评论关闭
    IT虾米网

    微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!