我正在使用 Gridster 框架创建一个仪表板,每个仪表板项目都有一个"删除"和"固定"按钮。但是,我遇到的问题是,当我单击"固定"按钮(将面板锁定到位)时,它会普遍影响所有面板,而不是单个面板。删除按钮工作正常,并删除单个面板。我无法添加单个 ID 或类,因为面板必须是通用的。为什么在这种情况下,引脚按钮不起作用?
引脚(将所有面板锁定到位,但仅用于锁定有问题的单个面板):
$(document).on("click", ".gridster .pin-button", function () {
var pin = $(".gridster ul").gridster().data('gridster');
if (pin.drag_api.disabled) {
pin.enable($(this).parent());
} else {
pin.disable($(this).parent());
}
});
删除按钮(正确删除有问题的面板):
$(document).on("click", ".gridster .delete-button", function () {
var gridster = $(".gridster ul").gridster().data('gridster');
gridster.remove_widget($(this).parent());
});
示例面板:
<div class="gridster row">
<ul>
<li class="gs_w" data-row="1" data-col="1" data-sizex="4" data-sizey="3">
<button class="pin-button"><img src="pin.png"></button>
<button class="delete-button"><img src="Close.png"></button>
... panel content ...
</li>
</ul>
</div>
这是因为引脚选择器是:
var pin = $(".gridster ul").gridster().data('gridster');
这可能会找到另一个 .gridster ul,这应该与 currnet gridster 相关,因此您可能有:
var pin = $(this).parent('.gridster');
>所以根据 https://github.com/dustmoo/gridster.js我所要做的就是为我的主网格分配一个静态类,即:
<script type="text/javascript">
var gridster;
$(function () {
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
helper: 'clone',
static_class: 'card_static',
draggable: {
items: ".gs_w:not(.card_static)"
},
resize: {
enabled: true
}
}).data('gridster');
});
</script>
然后将我的 Pin JS 更改为:
$(document).on("click", ".gridster .pin_button", function () {
if ($(this).parent().hasClass("card_static")) {
$(this).parent().removeClass("card_static")
} else{
$(this).parent().addClass("card_static")
}
});