添加/删除小部件以及调整大小不起作用

Posted 2023-05-07

【中文标题】添加/删除小部件以及调整大小不起作用

【英文标题】：Adding/remove widget along with resize not working

【发布时间】：2018-08-09 08:53:52

【问题描述】：

我使用了基本的 gridster 代码，然后我声明了通过按钮添加和删除小部件的函数它工作正常 但是当我将调整大小功能添加到上面的代码时，它都不起作用（我的意思是调整大小、添加和删除小部件）

我的js代码如下

<script type="text/javascript">
    var gridster;

    gridster = $(".gridster ul").gridster(
        widget_base_dimensions: [100, 100],
        widget_margins: [5, 5],
        helper: 'clone',
        resize: 
            enabled: true
                   


    ).data('gridster');



$(document).on( "click",".delete-button", function() 
var gridster = $(".gridster ul").gridster().data('gridster');
gridster.remove_widget($(this).parent());
);



$(document).on( "click",".add-button", function() 
var gridster = $(".gridster ul").gridster().data('gridster');      
gridster.add_widget('<li><button class="delete-button" style="float: 
right;">-</button><h3></h3></li>',1,1);
);

以上代码不工作

工作代码中没有这个

resize: 
        enabled: true
        

【问题讨论】：

尝试为您的代码创建一个小提琴。如果有帮助，请参阅此link。

这是小提琴jsfiddle.net/xbv1fdud的链接

jsfiddle.net/xbv1fdud/1 工作正常。调整大小时 +- 按钮工作正常，有什么问题？

网格的大小调整不起作用我的意思是我想改变网格的大小

看看这个更新小提琴jsfiddle.net/xbv1fdud/14。更新它参考link

【参考方案1】：

参考解决方案here，已将您的代码更新为resizable()

还添加了css文件jquery.gridster.css。

$(function() 
  var gridster;
  var grid_size = 100;
  var grid_margin = 5;
  gridster = $(".gridster ul").gridster(
    widget_base_dimensions: [100, 100],
    widget_margins: [5, 5],
    helper: 'clone',
    resize: 
      enabled: true
    


  ).data('gridster');



  $(document).on("click", ".delete-button", function() 
    var gridster = $(".gridster ul").gridster().data('gridster');
    gridster.remove_widget($(this).parent());

  );



  $(document).on("click", ".add-button", function() 
    gridster
      .add_widget('<li><button class="delete-button" style="float: right;">-</button><h3></h3></li>', 1, 1);
    gridster.resizable(
      grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
      animate: false,
      minWidth: grid_size,
      minHeight: grid_size,
      containment: '#layouts_grid ul',
      autoHide: true,
      stop: function(event, ui) 
        var resized = $(this);
        setTimeout(function() 
          resizeBlock(resized);
        , 300);
      
    );
  );
)

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css" rel="stylesheet"/>
<link href="https://dsmorse.github.io/gridster.js/demos/assets/css/demo.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
<h1>Add and Remove Widget Dynamically</h1>

<p>When you remove a widget,the widget below it will always remain in the same column.Widget from next column wont come in place of widget removed.Gridster is designed that way</p>
<a href="https://github.com/ducksboard/gridster.js/issues/338" target="_blank"> Click to know more</a>


<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>1</h3>
    </li>
    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>2</h3>
    </li>
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>3</h3>
    </li>
    <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>4</h3>
    </li>
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>5</h3>
    </li>
    <li data-row="2" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>6</h3>
    </li>
    <li data-row="2" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>7</h3>
    </li>
    <li data-row="2" data-col="4" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>8</h3>
    </li>
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>9</h3>
    </li>
    <li data-row="3" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>10</h3>
    </li>
    <li data-row="3" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>11</h3>
    </li>
    <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button>
      <h3>12</h3>
    </li>



</div>


<button class="add-button" style="float:top;">Add Widget</button>

【讨论】：

当我添加一个小部件时，调整它的大小并删除它，删除后它变成红色，请你帮忙