如何让GridStack中动态创建的元素支持拖拽功能？

问题原因 #

GridStack 初始化时仅会对页面中已存在、匹配dragIn配置的选择器（此处为.newWidget）的元素自动绑定拖拽事件，后续动态生成的元素没有经过事件绑定流程，即使手动添加拖拽相关类名也无法生效。

解决方法 #

无需手动给元素添加ui-draggable、ui-resizable这类由拖拽逻辑自动生成的类，仅需在动态生成元素后，调用 GridStack 提供的makeDraggable方法绑定拖拽事件即可。

修改你的动态生成元素部分的JS代码如下：

//dynamic elemenets
const arr = ["Bruh cant drag me!", "Nope me neither", "Me too mouhahaha"];

//loop
for (let i = 0; i < arr.length; i++) {
  const el = document.createElement('div');
  // 仅需要保留业务需要和dragIn指定的类名即可
  el.className = 'newWidget grid-stack-item';
  el.innerHTML = `<div class='grid-stack-item-content' style='padding: 5px;'> ${arr[i]} </div>`;
  $('.dynamic').append(el);
  // 给动态生成的元素绑定拖拽进网格的能力
  grid.makeDraggable(el, grid.opts.dragInOptions);
}

补充说明 #

如果你需要直接动态添加组件到GridStack网格内部，可以直接调用grid.addWidget()方法，不需要手动处理DOM生成和拖拽绑定。

内容的提问来源于stack exchange，提问作者Grogu