我有个问题。我想用 gridstack 制作动态内容。我想添加和删除 gridstack 项目。问题是我无法删除它们。我得到一个错误。
单击 X 删除项目时，我收到一个错误：未捕获的错误：在初始化之前无法调用可拖动的方法；试图调用方法“销毁”
我在 PL?SQL 动态内容中的代码是：begin sys.htp.p('');
for r in (select seq_id
,c001 tlt_id
,c002 tlt_nr
,c003 tlt_wcl_id
,c004 tlt_row
,c005 tlt_col
,c006 tlt_width
,c007 tlt_height
from apex_collections
where collection_name = 'LAYOUT'
order by c004, c005)
loop
sys.htp.p('<div class = "grid-stack-item"' ||
'"data-gs-x="' ||
r.tlt_row ||
'" data-gs-y="' ||
r.tlt_col ||
'" data-gs-width="' ||
r.tlt_width ||
'" data-gs-height="' ||
r.tlt_height ||
'" data-nr="' ||
r.tlt_nr ||
'" data-gs-id="' ||
r.seq_id ||
'"><span class="g-nr">' ||
r.tlt_nr ||
'</span><i class="fa fa-times g-rem"
onClick="grid.removeWidget(this.parentNode.parentNode)"></i>
</div>') ;
end loop;
sys.htp.p('</div>');
end;
在函数和全局变量声明中，我有以下代码：
var grid = GridStack.init();
var options = {
width: 100,
height: 100,
float: false,
animate: true,
disableResize: false,
disableDrag: true,
cellHeight: 'auto',
cellHeightUnit: 'px',
removable: '',
removeTimeout: 100,
verticalMargin: 20,
acceptWidgets: '.grid-stack-item',
resizable: { handles: 'e, se, s, sw, w' },
alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
};
var widgetWidth = 100;
var maxCol = 4;
var fontSize = widgetWidth/2;
function initStack()
{
grid.addWidget('<div><div class="grid-stack-item-content">Item 1</div></div>', {width: 2});
grid.addWidget('<div><div class="grid-stack-item-content"><button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br></div></div>', 0, 0, Math.floor(1 + 3 * Math.random()), Math.floor(1 + 3 * Math.random()), true);
delRebind();
console.log('grid has ');
}
function addItem() {
grid.addWidget('<div><div class="grid-stack-item-content"><button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br></div></div>', 0, 0, Math.floor(1 + 3 * Math.random()), Math.floor(1 + 3 * Math.random()), true);
delRebind();
}
function delItem() {
var liItem = $(this).parents("div");
var liItemNr = $(this).parents("div").attr("data-nr");
el=$('.grid-stack-instance-7377').closest('.grid-stack-item');
grid.removeWidget(this.parentNode.parentNode);
}
function delRebind() {
$(".g-rem").off("click");
$(".g-rem").on("click", delItem);
$("div.grid-stack-item .g-nr").css("font-size",fontSize + "px").css("margin-top", (fontSize/2) + "px");
}
有人可以帮忙吗？