Question

我正在研究gridster.js，我对它很新。我创建了以下代码片段，其中包含添加，删除和调整窗口小部件的大小。添加和删除工作正常，但Resize无法正常工作。

请参阅以下代码。提前谢谢你的帮助 ..！！

＆＃13;

<script>
	var gridster;
	
	$(function(){
	
		gridster = $(".gridster ul").gridster({
	          widget_base_dimensions: [100, 55],
	          widget_margins: [5, 5],
	          helper: 'clone',
	          resize: {
	              enabled: true,
	              
	          },
	         
	        }).data('gridster');
		
		 $(document).on( "click", "#addWidgetButton", function(e) {
		     e.preventDefault(); 
		     gridster.add_widget.apply(gridster, ['<li class="gridster">new <div class="deleteWidgetDiv">X</div><span class="gs-resize-handle gs-resize-handle-both"></span> </li>', 1, 2]);
		        $(document).on( "click", ".deleteWidgetDiv", function() {
		            $(this).closest( "li" ).addClass("activ");
		            gridster.remove_widget($('.activ'));
		        });

＆＃13;

	.gridster ul {
    list-style: none;
    background-color: gray;
}
.gridster ul li {
    background-color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="{% static '../js/jquery.draggable.js' %}" type="text/javascript"></script>
<script src="{% static '../js/jquery.coords.js' %}" type="text/javascript"></script>

<script src="{% static '../js/jquery.gridster.js' %}" type="text/javascript"></script>
<script src="{% static '../js/jquery.gridster.css' %}" type="text/css"></script>

<body>
	 <button id="addWidgetButton">Add widget</button>
	  <div id="log"></div>
    <div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <div class="deleteWidgetDiv">X</div></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
          <div class="deleteWidgetDiv">X</div></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
          <div class="deleteWidgetDiv">X</div></li>
          <li data-row="4" data-col="2" data-sizex="1" data-sizey="1" class="gs-w">New   <div                  class="deleteWidgetDiv">X</div></li>
  
    </ul>
  </div>
</body>

＆＃13;

Gridster调整大小不起作用

0 个答案: